AIM : Create A Web Application Using The "MVC" Approach i.e Model-view-controller.

Good morning guys.

PLEASE NOTE : This Series is for people who want to take there web development skill or career to the next level. You may have the basic foundation in html,css,js,php,mysqli and still don't know how to apply what you have learnt to creating a web application.
Now, in case you don't know anything about HTML, CSS, JS, MYSQLi, PHP. Don't worry, i will still try my best to touch the basics but knowing one or two or all of the language will be an added advantage as we go through the series.

This are the few things we will focus on for the next few days.

Since we are focusing on web development and mobile app development at the moment. We need to first understand,
i. what we need to do
ii. what we need to learn and
iii. how to get to the finish line as a better person and a good developer.

There are two parts of web development

1. Front End
2. Back End

Though, there is nothing wrong with using CMS e.g joomla, wordpress, drupal etc or wix, blogger, webflow etc, but we are focusing on coding and people that want to start a career in software industries.
I will do my best for you to understand what the two parts are and how you can be a Front-end Developer, Back-End Developer and a Full Stack Developer if you desire to be one. You will be surprised that you can be a Junior Front End Developer in 2 months and land a good Job with good salary or be a freelancer like many developers out there.

Now for the practical aspect. We will start with practical application of

1. Bootstrap
2. Php
3. Mysql
4. AngulaJs

By creating a web application using the "MVC" approach i.e Model-View-Controller.

We will do all this by coding it ourselves from scratch without using framework.
Then, we will proceed to how to use a "Php Framework" e.g Laravel.

We will also work on this

1. ReactJs
2. NodeJs

I pray God help me. If you are interested in helping people achieve there dreams by taking any one of this language, Please let me know. It will make my work easier as well.

Note : You are always free to drop any questions, if you need help on anything that is related to careers in tech and development.

For more updates, you can check this page - https://www.facebook.com/creativeminds07/

Get prepared. See you soon.................

Good afternoon guys

In case you are wondering if this tutorial is meant for you. Well, the tutorial is meant for everyone, with no, little or advance knowledge of html5,css3, bootstrap, php and mysqli. But in case you don't have any knowledge on any one of this, then don't worry, i will try my best to simplify in a way that will make it easy for you to understand.

Now, let us start,

STEP 1

i. Open your text editor e.g Programmer's Notepad (http://www.pnotepad.org/download/) or Notepad++ (https://notepad-plus-plus.org/download/v7.5.1.html) etc

ii. Start your Wampserver or any other server that you have.

STEP 2

i. Create a folder for your project. For those that was with us in the previous series. I mentioned that, before you start coding, structure(i.e organize) the folder for your project very well.
E.g if you want to create a web app for mtn, then create a folder and give it the name "mtn". This means, all the files that you need to create the app for mtn will be inside the "MTN" folder.

Then, create several sub folders under "MTN" folder for example, you will need folder for
a. css
b. images(i.e this is where you will put all the image that you need for the "MTN" project),
c. js
d. font etc

So for now, just create a folder, i will call my folder "CMS 2.3".

NOTE : Create the folder inside your www folder.
To get to the www folder.

1. Open your local disc
2. Locate "wamp"
3. Inside the wamp folder, locate the "www" folder
4. Inside the "www" folder, then create the folder that you want to use

At the end of the day, we will create CMS like wordpress, that will be easy for you or your clients to manage.

NEXT : Create your first PHP Script.

1. Create a new file in your text editor e.g notepad++

2. Save the new file as "index.php" inside the folder that you create ealier on for the project. Mine is "CMS 2.3"

3. Type the code

<?php

echo "Hello World";

?>

4. Save the file .

5. Now open your default browser that you choose when you install the WAMPSERVER and go to localhost(Check the image for more details).

Now, we will focus on the frontend of our project for now before we go to the backend. We will not spend so many hours on the frontend but i will try my best to make sure that you have the basic understanding of how to create the frontend of your web app using bootstrap.

See you there................

https://www.facebook.com/creativeminds07/

Feel free to ask your questions, i will try and answer the ones i can. While other developers in the house will also help to answer the questions as well.

If you guys are interested in this series. Please drop your comment.

See you soon..............

though I will be using Django powered by Python but I'll appreciate the extra knowledge of PHP as am currently learning JavaScript now.
thanks mate and God bless as you are doing a beautiful work here.

vibratingpenis:
though I will be using Django powered by Python but I'll appreciate the extra knowledge of PHP as am currently learning JavaScript now.
thanks mate and God bless as you are doing a beautiful work here.

Yes, you are right. Django is a fullstack open source framework. That is good and you don't even need a separate web server for your work and it comes with its own lightweight development server. One of the best framework out there that makes work easy for developer. Well done.

Following

Nice work there.

Really Enjoying it...Pls ride on.

vibratingpenis:
though I will be using Django powered by Python but I'll appreciate the extra knowledge of PHP as am currently learning JavaScript now.
thanks mate and God bless as you are doing a beautiful work here.

lol your monicker is funny

oga mi sir, wat d diff btw front end and back end as well as ui and ux?

shams040:
oga mi sir, wat d diff btw front end and back end as well as ui and ux?

We are all boss sir. I will try my best to explain and simplify it so as not to confuse you. Many Experts has there own way of explaining this but i will try to do justice to this is my own way. So let us start with UI AND UX

UI AND UX

UI(User Interface) is the visual aspect of the website while the UX is the user experience using your website or products. This is the simple way i can define it so as not to bore you or confuse you. But i believe you have a good picture of what am trying to say.


FRONT END AND BACK END

The frontend of a website is more like what you see and interact with on your browser. Also referred to as “client-side”, it includes everything the user see and experiences directly: from text and colors to buttons, images, and navigation menus etc

The backend (or “server-side”) is the part of the website you don’t see. It’s responsible for storing and organizing data, and ensuring everything on the client-side actually works.
The backend communicates with the front-end, sending and receiving information to be displayed as a web page.


This is a simple way to explain everything so as to give you a perfect picture of what they are.

So you can choose to be a Front End Developer, Back End Developer, Or Both.

kreativemind:



Yes, you are right. Django is a fullstack open source framework. That is good and you don't even need a separate web server for your work and it comes with its own lightweight development server. One of the best framework out there that makes work easy for developer. Well done.

you are right

Our Focus is to create a single page application to make the website loads fast. Make our code more organized and fun to write......
This means that, you don't need to create several pages for your home, about, gallery, contact, faq etc.

A single page will be use to generate all the content for this different pages.

Note : Am not referring to a One page html website.
What we will do will look like you have 5 pages e.g

1. Home.html
2. About.html
3. faq.html
4. Portfolio.html
5. Contact.html

Now instead of creating 5 different files for all this pages, we will create a single file and pull the content for each page dynamically.

If you still can not understand this, then don't worry, you will understand before we finish the series.

2. Another thing that we will learn is how to not use index.php or index.php?id=1 , about.php etc
So instead of doing that,we can just have something like "About", "Home" , "faq" , "Contact",
e.g instead of www.companywebsite.com/about.php, you can now have www.companywebsite.com/about


See you guys tomorrow...........

Remember to share the page with your friends that you love to help and don't keep it to yourself. We are all part of something big and we can do it together by helping each other.

https://www.facebook.com/creativeminds07/

pcguru1:

lol your monicker is funny

lol

Good afternoon guys,

I hope you are ready for today's class.

Now let's start diving into some real but fun code.

1. Get rid of the hello world and set up the basic html page
2. A basic html page looks like this

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>


Next : We will how to get the resources that we need for our web site e.g bootstrap, jquery, font awesome etc.

1. getbootstrap.com

a. go to "Documentation"
b. Click "Download" on the left hand side of the page and click download, under the "Compiled CSS and JS", now we are bootstrap 4.0.
So for easy access, i will send the version am using now to you.

Note : If you like and you are connected to the internet. You can use the CDN version

2. Go to http://fontawesome.io/ and click download, but i will attache the font-awesome file that we we use for this project.

3. Go to jquery.com and download the jquery file.
I will also send the file to you as well

4. We will also use "jqueryui" which is a framework. Go to jqueryui.com and download the "CSS" and the "JS" files.
I will also send this files to you.


See you in the next post.........................

Now, let us set up the resources that we need.

Please download the attached files. and also download the font awesome file from http://fontawesome.io/
I would have send the font files from font awesome but the files is more than 250kb, which is the maximum file size we can attached on nairaland.

Hi,

Hope you guys have all the resources that you need and your folders looks like this.....

Will be waiting for the update from you guys..........

Good a thing i started this class early, I know Joomla, and HTML and CSS to an extent, but I've never tried JavaScript or Php before. I hope I would be able to pick it up as we proceed.
Thanks OP.

Nonso92:
Good a thing i started this class early, I know Joomla, and HTML and CSS to an extent, but I've never tried JavaScript or Php before. I hope I would be able to pick it up as we proceed.
Thanks OP.

Yes. You would be able to do that easily. Like i point it out in the previous lesson that, having a background in php, mysqli etc will be an added advantage but yet, that does not mean that you will not be able to understand it easily.
I like to say welcome on board.


*Still waiting for update from people that have download and set up there project before we proceed...............*

Op, pls where is your location

Ride on brother, kudos

crowntoro:
Op, pls where is your location

Lagos.

Can i continue......................................?
Hope you guys have all the files that you need for this project?

kreativemind:
Can i continue......................................?
Hope you guys have all the files that you need for this project?

go onnn..

Collins4u1:
Ride on brother, kudos

Thanks

Now that you now have all the resources that you need. Let us continue.

1. Add the bootstraps files to the head section of your code. I can call it the head tag i.e <head></head>

You code must look like this

<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Bootstrap CSS file-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!--Optional Theme-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">

<!--Bootstrap Javascript file-->
<script src="js/bootstrap.min.js"></script>


</head>
<body>

<h1>Hello World</h1>

</body>
</html>

2. Now, go to your browser and reload the index page. You should see a change in the font and style of your "Hello World" compared to the time that you did not add the bootstrap files.
Check my attached file. The first image is the one without the bootstrap files, the second image is the one with the bootstrap files and the last image is the screenshot of my code

Now, the final part of the setting up our project is to add the jquery script and font awesome style as well.

1. Add it to the head section and make it look like this....

<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Bootstrap CSS file-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!--Optional Theme-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">

<!--JQuery UI CSS-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">

<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

<!--JQuery-->
<script src="js/jquery-1.12.4.min.js"></script>

<!--JQUERY ui-->
<script src="js/jquery-ui.js"></script>

<!--Bootstrap Javascript file-->
<script src="js/bootstrap.min.js"></script>


</head>
<body>

<h1>Hello World</h1>

</body>
</html>


2. Now the next step is to test our font icons. You can go to http://fontawesome.io and choose any icon that you want. The icon that i am using is here http://fontawesome.io/icon/briefcase/

3. Put the icon tag in your body tag like this

<!DOCTYPE html>
<html>
<head>
<title></title>
<!--Bootstrap CSS file-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!--Optional Theme-->
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">

<!--JQuery UI CSS-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">

<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

<!--JQuery-->
<script src="js/jquery-1.12.4.min.js"></script>

<!--JQUERY ui-->
<script src="js/jquery-ui.js"></script>

<!--Bootstrap Javascript file-->
<script src="js/bootstrap.min.js"></script>


</head>
<body>

<i class="fa fa-briefcase fa-4x" aria-hidden="true"></i>
<h1>Hello World</h1>


</body>
</html>

4. Go to the browser and refresh the index page

Note : the font icon is like this <i class="fa fa-briefcase" aria-hidden="true"></i> but with a small size, so the addition of

1. fa-2x OR
2. f-3x OR
3. f-4x OR
4. f-5x
Can increase the size of the font icon. The tag can look like <i class="fa fa-briefcase fa-4x" aria-hidden="true"></i>
You can try it to see the difference.

Thanks

Yeah, i also noticed a change in the ''Hello World'' it looked more nice order than just plain text.

Collins4u1:
Yeah, i also noticed a change in the ''Hello World'' it looked more nice order than just plain text.

That is the work of bootstrap..........(So instead of trying to define your styles, it has been done for you in bootstrap, though i will advice that you know css to some extent, because bootstrap can not do everything for you).

Well done. Were you able to get the font icon as well?

Guys, show us the screen shot of your work ooooo......................................................