MCzubby247:

thanks bro for prompt response.
like programmers in Nigeria, how much so they earn averagely especially mobile programmers

It depends. Some mobile app developers have a salary of 250k/month averagely. while some is like 400k/month. and some is not up to that. But am not referring to junior mobile app developers.

Freelancers can make more than that or less than that. So it all depends on a lot of factors.

Back to the turorial

On the insert page, the phpmyadmin allows you to enter two rows to your table at once y default.
Check the screen shot to see mine.

Now each row of the table will represent each page e.g home, about

For the first row, we will fix the content for this page

1. title : Put the title of the page here e.g Home Page
2. Header : You can put anything here e.g Welcome to My CMS 2.3
3. body : Copy and paste the lorem Ipsum content here


For the second row i.e the about page information

1. title : Put the title of the page here e.g About Us
2. Header : You can put anything here e.g About My CMS 2.3
3. body : Copy and paste the lorem Ipsum content here

Lastly : Click the "Go" button beside the "Reset" button.

MCzubby247:

<p>
I'm learning on my own android studio but base on the video tutorials I have to build from scratch, XML, java. my question are there short cut like what get bootstrap does to web?

bro, I think you can be of good help to me, could you advice me?
4 years ago I ventured into web programming I know a little about web HTML, CSS and php, but I have an idea on mobile I want to work on.
Now the issue is that my visa to travel will be ready in a month or 2 and I want to attend a bootcamp on mobile dev but if I attend the bootcamp I won't be able to foot my travel.
as a mobile dev how much can I command per month to stay back and forfeit my travel or move ahead to Europe.
sorry I'm on transit typing this might have lots of typo error
Note: I lived in Ukraine for sometime.
expecting your response..... </p>

1. Am sorry to say this, as far as i know. There is no shortcut to it although some frameworks or platforms makes it easy. Especially in the Hybrid app department. Where you will use your knowledge of HTML, CSS etc and AngularJs e.g You can use Ionic Framework.
A lot of technologies are also coming out. Sometimes this is scary..... ....very soon mobile app development will be like drag and drop things. But for now you will still need to work ooooo. No shortcut sir.
For me you are already on the right track.
What i normally advice people is to do some research on the language or skill that they want to learn before going to bootcamp or watching some video tutorial. While all this bootcamp and video tutorial are good, they will help you more when you have a basic understanding of what you want to learn and why you want to learn it.

2. Regarding the visa and the bootcamp. Normally, i don't know why you want to get a visa but i can tell you this.
There is nothing wrong with going to bootcamp but you don't have to go before you master it. Though bootcamp make it easy because of the environment but many good programmers don't go to bootcamp before they become an expert. I learn from ebooks and video tutorial and it really helps me a lot. Although what i should have cover in a matter of two weeks if i attend the bootcamp. I may have to do it in a month since am doing it alone and a lot of factors can affect my focus.
Now, so far the bootcamp is free, there is nothing stopping you from going, believe me, what you will learn in few weeks will really set a foundation for you so much that all others things that you will learn on your own will become easy for you and you will not have to forfeit your travel. Just remain focus and know that you are different from the others that attend the bootcamp, you have limited time, so strategies things that will make it easy for you and fun as well.

Never forget the fun part. Don't be like many programmers that thought frowning there face shows that they are a good programmers. Your brain need to relax to process more code...... ......

Am always here to help you. All the best bro

Next : We need to insert some records into the table that we create

1. Open the table that you create by clicking it
2. Locate insert tab and click it
3. Your page must look like the attached picture.
4. Open another browser tab and go to http://www.lipsum.com/

Good morning everyone, we will start today's class. Sorry for the delay and i hope we don't have any issues with the previous tutorial i.e your output is like mine and everything works fine.


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

MCzubby247:
bro, you are doing create, I love I
every bit of it .
can I ask you do all programming follow the same?
eg
like android if I have to create the layout or front end is there get bootstrap for it than to start from scratch to cre

I don't understand your question very well. Are you asking if there are frameworks like bootstrap that makes development of andriod app easy for the UI part?

Better still, you can tell me what you want to do or achieve and i will try to simplify it for you.

Doughboysss:
Updates

Very good

Feel free to drop your questions on the table creation if you need my help...........

If you can get the table structure correctly. Then we can proceed.
Waiting for the screenshot of your work guys......................................


YOU CAN DO IT!......................................

Next : We will create table inside the database to hold the page information.......

Step 1 : Open the database that you created through "phpmyadmin". Mine is "cms2.3"
Step 2 : Enter the table name and the number of column for you table

Note : If you are coming from the background of creating static website. Then, don't worry, this next step will make is easy for you to create a cms for your website.
If you also the type that create several php file for each page i.e home.php, about.php, contact.php. Then this tutorial will also make is easy for you to create a single page application by loading our content from the database into a single page.


Now, let us proceed with the tutorial'

Step 3 : This are the columns that we need in our table. We need four columns
i. id
ii. title
iii. body
iv.

Step 4. Enter the table name. Mine is "pages" and enter the number of the column i.e "4" and click "GO"

Step 5 . Enter the name for each column as well as the datatypes

1. Column 1 name is "id".
Datatype is "INT" i.e integer.
length : 11.
Note "You can put any number in the length field". It depends on the number of character that you want and your target.
Now go to index field for the "id" and choose "Primary key"
Check the "AI" box i.e auto increament.

2. Column 2 name is "title".
This title is the one that will show in the browser tab bar. i,e <title></title>

datatype is "Varchar" i.e variable character
Length : 200. You can use any number

3. Column 3 name is "header"
This is the header for the body of the page

datatype is "varchar"
length is "300"

4. Column 4 is "body"
datatype is "longtext" i.e you will be able enter a lot of character in this field

5. Click Save

Note : Please check the screenshot for better understanding.......

Now, let us write some set of instruction for what to do if the connection is not correct.....

//DATABASE CONNECTION
$conn = mysqli_connect('localhost', 'cms', 'password1', 'cms2.3') OR die('Unable to connect because '. mysqli_connect_error());

Good morning everyone......

Hope we are ready?

Doughboysss:
Good evening @kreativemind

Updated

Very Good

Check the image for the screenshot of my setup.php

Now, let us create a variable for the database and store the connection in that variable i.e

$conn is our variable name for the database

$conn = mysqli_connect('localhost', 'username', 'password', 'databasename');

username : this is the username of the database that you want to use
password of the username that you want to use
database name is the name of the database that you have created

Next : We need to create the database. You can use the mysql cmd to create the database or you can use the Phpmyadmin of the wampserver or xampserver that you have to create the database as well as the username and password.

2. Open Phpmyadmin
3. Click Databases
4. Enter the name of the database and click create. My database name is CMS2.3


Next is to create user name and password. The default username for wamp server is "root" but we will create another one.

1. Click the database that you create Mine is cms2.3 and locate "Privileges" and click it.
2. Click "Add User"
3. Enter the name of the database,
ii. Choose "Any Host"
iii. Enter the password

4. Check All
5. Scroll Down and click "Go"

Then go to your database connection inside setup.php and enter all the information for username, password and database name.

We will write the script to handle database error in the next tutorial.

Well done guys

Now let us focus on the setup.php

1. We are going to create a variable.
For a database connection and site title and page title or name.

For the site title e.g <title>Home Page | CMS 2.3 </title>
We are going to use variable to make it dynamic. Some thing like this

<?php

//SETUP FILES

//DATABASE CONNECTION


$site_title = 'CMS 2.3';
$page_title = 'Home Page';


?>


2. Now, go to the index.php and change your site title(<title> Home Page | CMS 2.3 </title> to look like this.....

<title><?php echo $page_title; ?> | <?php echo $site_title; ?></title>

OR
To make our code more fun and easy to read. Write it like this


<title><?php echo $page_title .' | '. $site_title; ?></title>

Collins4u1:
No lecture today boss?

There is lecture. I have been busy. Sorry about that. Will continue in few minutes.


I hope we are all ready?

Chrismario:
Lemme kuku start learning this.

Im old tho, wonder how low it will take to master yhis

Collins4u1:


right away, thank you sire

You are welcome

Love the passion. Well done.

Collins4u1:
Yeah! Why saving as .php now?

Judging from your question. It looks to me like you don't have a knowledge of what PHP is. I will advice that you do some basic reading on PHP and MYSQL. When you finish, this tutorial will make it easy for you to take what you have learn to the next level easily. Like i said, this tutorial is not for beginners but i can only try to simplify things for you. I will advice you read some few things on PHP - https://www.w3schools.com/php/default.asp


By the time you finish that and come back to this tutorial. It will be so easy for you.

YungDenzel:
PHP?

Yes.

Csami:
<!--Optional Theme-->

The comment above...what does it do or signifies?
Care to give a well detailed explanation

Okay. Let me put it in a simple term.
Bootstrap.min.css is a minified version of bootstrap i.e the bootstrap core files. while the "optional theme", which right from is name, is optional for you to use. It gives 3D effects on the buttons and some other elements. So is more like an extra effect for some elements on your page which is not on the bootstrap core file.

I hope you now understanding.

Collins4u1:
Please can you explain what those css means? Those positin: relative, minimium height, what's their actial work

Yes. For this project. The two html css properties is not important for this project. But this is what they do, and you can try each of the "position" property for the footer to see the effect.

POSITION : In summary, the position properties determined how an elements is positioned. It can be top or bottom etc.
We have

1. Static
2. Relative
3. Fixed
4. Absolute
4 Sticky.

I will advice you read and study CSS to have a good foundation on what all this are and how to use them appropriately.

Now, let us do it this way.
Go back to your project folder name. Mine is "CMS 2.3".
Inside this folder, create another folder called "config",

1. Inside the config folder, create php file and give it the name css.php, js.php and setup.php

css.php : we will put all the css code in the head section in this file
js.php : we will put all the js code in the head section in this file
setup.php : we will put our database connection and some functions in this file.

Now back to our discussion, the first image is for css.php, the second image is for js.php, the third image is for setup.php and the last image is for the index.php


Reload your page and make sure everything is still okay.


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

Next : Add title to your page i.e <title>Your title here </title>

2. We will need to organize our files more.

Now, what am trying to do or achieve is to try to trim our code down a little bit to make our code more structured, easy to read and debug, clean and fun( ).

Let us proceed

NEXT : FOOTER

We can approach it in different ways. But since we are using bootstrap. The good news is that, there is an example of how to create a footer on the bootstrap website. Just go to https://getbootstrap.com/docs/4.0/examples/sticky-footer/

or use 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">

<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}

</style>

<!--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>



<nav class="navbar navbar-default" role="navigation">

<div class="container">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact</a></li>


</ul>

</div>

</nav><!-- END MAIN HAVIGATION OR END NAV-->




<div class="container">

<h1>Content Area</h1>

</div>

<footer class="footer">

<div class="container">

<p class="text-muted">Place your sticky footer content here</p>

</div>

</footer>

</body>
</html>

Collins4u1:
Question sir, can we set the navlinks to be in ''justified'' state?

Yes. But share the screenshot of your work with everybody.

Thanks

Doughboysss:
Following...

Very good

But if you want the navigation bar to be stretched to each end of the browser window while you put the menu link in the center of the bar. You can do it this way.............

<!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>



<nav class="navbar navbar-default" role="navigation">

<div class="container">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact</a></li>


</ul>

</div>

</nav><!-- END MAIN HAVIGATION OR END NAV-->




<div class="container">

<h1>Content Area</h1>

</div>

</body>
</html>

Still On Navigation Bar


If you want to put the navigation bar and the menu link at the center. We use a bootstrap class i.e "container".
Everything inside the class "container", you can do it this way.

Next Step : We will divide it into three part.

1. Navigation
2. Content Area
3. Footer


NAVIGATION

1. Go to http://getbootstrap.com/ and click "documentation"
2. Go to components and select "navbar".
I will advice that you navigate the website yourself as this will really help you to understand it properly.

Note : I like to point out that there a lot of change and upgrade in the current bootstrap version.

Use this code for the navigation and refresh your browser to see it.

<!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>

<nav class="navbar navbar-default" role="navigation">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Contact</a></li>


</ul>

</nav>


</body>
</html>

Next, DRAW/SKETCH YOUR IDEA ON A PIECE OF PAPER.

This is the aspect that many so called good programmers don't like to do. i know you can visualize anything but putting it down on paper before you transfer it to a design software is very important. It helps a lot.