Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,776 members, 7,955,967 topics. Date: Sunday, 22 September 2024 at 07:58 PM |
Nairaland Forum / Science/Technology / Programming / Take Your Web Development Skill/Career To The Next Level By Creating A Web App (9700 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: 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: 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: 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( ). 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: 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: 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: 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: 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: 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 |
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 |
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: |
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: 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
|
Female Programmers Stand Up And Be Counted / My First Month At The ALX Software Engineering Programme / Learn Python- Introduction To Programming
(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 |