Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,148,849 members, 7,802,723 topics. Date: Friday, 19 April 2024 at 07:59 PM

Take Your Web Development Skill/Career To The Next Level By Creating A Web App - Programming (2) - Nairaland

Nairaland Forum / Science/Technology / Programming / Take Your Web Development Skill/Career To The Next Level By Creating A Web App (9271 Views)

The Decision Point To Switch Career To Tech And The Second Thought / Learn To Program By Creating Working Applications - FREE / How Many Clients Have You Gotten From Your Web Development Ad On Nairaland? (2) (3) (4)

(1) (2) (3) (4) (Reply) (Go Down)

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Collins4u1(m): 1:11pm On Sep 09, 2017
kreativemind:


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?

yes nah, up and running..

Tested 3 icons while varying their sizes
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 1:13pm On Sep 09, 2017
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.
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Collins4u1(m): 1:19pm On Sep 09, 2017
Following....


People make una come learn ooo mynd44
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 3:25pm On Sep 09, 2017
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>

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 3:54pm On Sep 09, 2017
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.

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Doughboysss: 4:13pm On Sep 09, 2017
Following...

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:18pm On Sep 09, 2017
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>

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:20pm On Sep 09, 2017
Doughboysss:
Following...

Very good
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Collins4u1(m): 4:34pm On Sep 09, 2017
Question sir, can we set the navlinks to be in ''justified'' state?
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:42pm On Sep 09, 2017
Collins4u1:
Question sir, can we set the navlinks to be in ''justified'' state?

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

Thanks
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 4:55pm On Sep 09, 2017
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>

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:03pm On Sep 09, 2017
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( cheesy).

Let us proceed

1 Like

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 5:24pm On Sep 09, 2017
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.................

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Collins4u1(m): 5:29pm On Sep 09, 2017
Please can you explain what those css means? Those positin: relative, minimium height, what's their actial work
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 9:47pm On Sep 09, 2017
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.

1 Like

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Doughboysss: 10:16pm On Sep 09, 2017
Updates

1 Like

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Csami(m): 10:26pm On Sep 09, 2017
<!--Optional Theme-->

The comment above...what does it do or signifies?
Care to give a well detailed explanation
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by ClintonNzedimma(m): 8:02am On Sep 10, 2017
Brilliant thread.... keep it up
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 8:43pm On Sep 10, 2017
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.

1 Like

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by YungDenzel: 9:19pm On Sep 10, 2017
PHP?
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 9:24pm On Sep 10, 2017
YungDenzel:
PHP?

Yes.
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Collins4u1(m): 9:35pm On Sep 10, 2017
Yeah! Why saving as .php now?
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 9:45pm On Sep 10, 2017
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.
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Collins4u1(m): 9:53pm On Sep 10, 2017
kreativemind:


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.

right away, thank you sire
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 10:07pm On Sep 10, 2017
Collins4u1:


right away, thank you sire

You are welcome

Love the passion. Well done.
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Nobody: 9:14am On Sep 11, 2017
Lemme kuku start learning this.

Im old tho, wonder how low it will take to master yhis grin
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 12:47pm On Sep 11, 2017
Chrismario:
Lemme kuku start learning this.

Im old tho, wonder how low it will take to master yhis grin
cheesy cheesy
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by Collins4u1(m): 1:52pm On Sep 11, 2017
No lecture today boss?
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 1:58pm On Sep 11, 2017
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?
Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 2:33pm On Sep 11, 2017
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>

1 Like

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 3:05pm On Sep 11, 2017
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

1 Like

Re: Take Your Web Development Skill/Career To The Next Level By Creating A Web App by kreativemind: 3:08pm On Sep 11, 2017
Check the image for the screenshot of my setup.php

1 Like

(1) (2) (3) (4) (Reply)

C++ Or Java: Which Way To Go? / Python Tutorial / How To Generate Unique 10/11 Digits Nuban / BVN With PHP

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 61
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.