New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating and styling the first page

From: PHP with MySQL Essential Training

Video: Creating and styling the first page

Now that we have our work area set up, and we've created a couple of placeholder templates for our pages. We're ready to actually create and style our first page. And the first page that I want us to tackle is just going to be the simplest page of the entire site. And it's that Admin menu, which is just simply text. Just a text and some basic links that allow us to click to other places. Let's create that page first. So, that file is going to be admin.php so we're going to open that up. I'm just going to paste in some HTML here. You can pause and copy it down if you want. Here's the body tag that existed before. Let me just show you here's the other body tag. So, everything between here is what I just added and I've got a header at the top.

Creating and styling the first page

Now that we have our work area set up, and we've created a couple of placeholder templates for our pages. We're ready to actually create and style our first page. And the first page that I want us to tackle is just going to be the simplest page of the entire site. And it's that Admin menu, which is just simply text. Just a text and some basic links that allow us to click to other places. Let's create that page first. So, that file is going to be admin.php so we're going to open that up. I'm just going to paste in some HTML here. You can pause and copy it down if you want. Here's the body tag that existed before. Let me just show you here's the other body tag. So, everything between here is what I just added and I've got a header at the top.

What I'm thinking is this will stretch across the top of the page. That's ID header. It says the name of the company Widget Corp in h1 tags. Then, I've got a block here called Main. We'll come back to that in a second. That's going to be most of the site content. And then at the bottom will be a footer, which we'll also stretch all the way across the bottom. It just has copyright information. And inside the main block, we're going to have a couple of other divs. The navigation, which I would like to float to the left. And then the page which will be on the right. So, we'll have navigation on the left and the page content on the right. And the Page Content here. It's just going to have our menu in it.

So, that's going to be just an unordered list, and each list item is going to have a link in it. And those links then are going to go to the PHP pages that we're going to create later for managing the website content. Managing the admin users, and logging out. So, let's just bring this up in a browser, let's save it and let's go to Firefox Localhost. And for me, that's Kevin Skoglund. And then instead of being in Sandbox now, it's going to be in my new folder for My Project. And remember, I also added Public. And so, inside the Public folder then, admin.php.

Now when we actually deploy it, we would have our web server send the users directly to the public folder. But we're still in development. So, we're specifying the entire path to get there, starting with localhost, okay? So, you would set-up your web server differently. And you can actually do it locally if you wanted, but there's just not as much point. Usually, in development, we go ahead and just supply the whole URL. And we set it up in production to be more secure. Alright, so let's take a look and there we go. We get what we expected, except that it's not very pretty. So, let's move directly to adding some styles to this.

So, I'm going to just Paste in a style reference. This is just basic HTML CSS in the head and I'm going to link to stylesheets public.css. So, let's take a look here. That's going to be right in this folder. So from admin.php, I'm going to go into the Style Sheets folder, and then I need to have a file called public.css that goes in there. Now I'm just going to drag in a copy of that file so that you don't have to watch me type it. But I'm going to bring it up so that you can pause the movie and copy if down if you need to.

It's also going to be included in your Excercise files. You can just grab it from there. Or you can create your own, what I've done is pretty simple stuff. So, I've got just some basic declarations here for HTML, body, images, the links. Then, I've got the main structure here, header, main and footer. And then the navigation is all right here. Notice that I've got float left on that. And then for page content, and I've also got float left on that, so that'll make those go side by side. Again, you can pause the movie if you want to copy all this down or you can grab it from the exercise files. I'm going to save it, close it.

Let's make sure we've saved this one as well. Let's go back and reload our page. And there you go, looks a lot better already. It's not the world's most beautiful site, but it's a big improvement over what we had before. Now, you could have different style sheets for different parts of your site. The public side, the admin side. I'm just going to have one because this tutorial is not about CSS, I think just having one will suffice. It'll just give us something that looks a little bit better, something we can work with. I think even if you're going to be working with designers who are going to do most of the designing. As a developer, it's still important for you to have some basic design skills so that you can still at least create a mock-up for yourself. It's a lot easier to work with a mock-up where things are sort of in the right place even though a designer may come back and make a lot of improvements to it later.

We can at least work with something that feels like it's going to be a website. Now, we haven't used any PHP in this yet. We have a webpage we can look at, it has .php at the end, but it has no PHP in it, just HTML and CSS. So, the next movie let's see how we can use PHP to make some of our page assets reusable.

Show transcript

This video is part of

Image for PHP with MySQL Essential Training
PHP with MySQL Essential Training

131 video lessons · 31708 viewers

Kevin Skoglund
Author

 
Expand all | Collapse all
  1. 4m 8s
    1. Welcome
      1m 0s
    2. Using the exercise files
      3m 8s
  2. 15m 6s
    1. What is PHP?
      3m 52s
    2. The history of PHP
      2m 51s
    3. Why choose PHP?
      4m 10s
    4. Installation overview
      4m 13s
  3. 54m 53s
    1. Overview
      2m 33s
    2. Working with Apache Web Server
      6m 56s
    3. Changing the document root
      7m 24s
    4. Enabling PHP
      6m 16s
    5. Upgrading PHP
      3m 30s
    6. Configuring PHP
      10m 3s
    7. Installing MySQL
      5m 46s
    8. Configuring MySQL
      7m 24s
    9. Text editor
      5m 1s
  4. 31m 25s
    1. Overview
      3m 27s
    2. Installing WampServer
      5m 46s
    3. Finding the document root
      2m 24s
    4. Configuring PHP
      8m 12s
    5. Configuring MySQL
      5m 45s
    6. Text editor
      5m 51s
  5. 19m 12s
    1. Embedding PHP code on a page
      6m 43s
    2. Outputting dynamic text
      5m 55s
    3. The operational trail
      2m 27s
    4. Inserting code comments
      4m 7s
  6. 1h 18m
    1. Variables
      7m 50s
    2. Strings
      4m 38s
    3. String functions
      8m 54s
    4. Numbers part one: Integers
      6m 27s
    5. Numbers part two: Floating points
      5m 25s
    6. Arrays
      10m 0s
    7. Associative arrays
      6m 37s
    8. Array functions
      6m 33s
    9. Booleans
      3m 50s
    10. NULL and empty
      5m 15s
    11. Type juggling and casting
      8m 27s
    12. Constants
      4m 43s
  7. 27m 37s
    1. If statements
      6m 0s
    2. Else and elseif statements
      4m 16s
    3. Logical operators
      7m 30s
    4. Switch statements
      9m 51s
  8. 42m 15s
    1. While loops
      8m 41s
    2. For loops
      5m 59s
    3. Foreach loops
      8m 16s
    4. Continue
      8m 28s
    5. Break
      4m 8s
    6. Understanding array pointers
      6m 43s
  9. 37m 25s
    1. Defining functions
      8m 25s
    2. Function arguments
      5m 32s
    3. Returning values from a function
      7m 33s
    4. Multiple return values
      4m 53s
    5. Scope and global variables
      6m 2s
    6. Setting default argument values
      5m 0s
  10. 20m 18s
    1. Common problems
      3m 47s
    2. Warnings and errors
      8m 36s
    3. Debugging and troubleshooting
      7m 55s
  11. 57m 57s
    1. Links and URLs
      5m 33s
    2. Using GET values
      5m 35s
    3. Encoding GET values
      8m 41s
    4. Encoding for HTML
      9m 26s
    5. Including and requiring files
      7m 40s
    6. Modifying headers
      6m 45s
    7. Page redirection
      6m 43s
    8. Output buffering
      7m 34s
  12. 1h 3m
    1. Building forms
      7m 28s
    2. Detecting form submissions
      5m 59s
    3. Single-page form processing
      7m 57s
    4. Validating form values
      10m 40s
    5. Problems with validation logic
      9m 54s
    6. Displaying validation errors
      7m 23s
    7. Custom validation functions
      6m 28s
    8. Single-page form with validations
      7m 25s
  13. 28m 5s
    1. Working with cookies
      2m 49s
    2. Setting cookie values
      5m 55s
    3. Reading cookie values
      6m 1s
    4. Unsetting cookie values
      4m 51s
    5. Working with sessions
      8m 29s
  14. 48m 39s
    1. MySQL introduction
      6m 43s
    2. Creating a database
      7m 41s
    3. Creating a database table
      7m 42s
    4. CRUD in MySQL
      5m 48s
    5. Populating a MySQL database
      7m 32s
    6. Relational database tables
      6m 40s
    7. Populating the relational table
      6m 33s
  15. 56m 4s
    1. Database APIs in PHP
      4m 51s
    2. Connecting to MySQL with PHP
      7m 45s
    3. Retrieving data from MySQL
      8m 47s
    4. Working with retrieved data
      6m 12s
    5. Creating records with PHP
      6m 58s
    6. Updating and deleting records with PHP
      9m 6s
    7. SQL injection
      3m 5s
    8. Escaping strings for MySQL
      6m 45s
    9. Introducing prepared statements
      2m 35s
  16. 35m 58s
    1. Blueprinting the application
      7m 19s
    2. Building the CMS database
      5m 14s
    3. Establishing your work area
      4m 38s
    4. Creating and styling the first page
      4m 22s
    5. Making page assets reusable
      6m 36s
    6. Connecting the application to the database
      7m 49s
  17. 32m 49s
    1. Adding pages to the navigation subjects
      5m 58s
    2. Refactoring the navigation
      6m 7s
    3. Selecting pages from the navigation
      6m 2s
    4. Highlighting the current page
      5m 26s
    5. Moving the navigation to a function
      9m 16s
  18. 1h 45m
    1. Finding a subject in the database
      9m 48s
    2. Refactoring the page selection
      10m 52s
    3. Creating a new subject form
      6m 55s
    4. Processing form values and adding subjects
      11m 20s
    5. Passing data in the session
      9m 16s
    6. Validating form values
      9m 40s
    7. Creating an edit subject form
      8m 30s
    8. Using single-page submission
      7m 44s
    9. Deleting a subject
      9m 44s
    10. Cleaning up
      10m 37s
    11. Assignment: Pages CRUD
      4m 30s
    12. Assignment results: Pages CRUD
      6m 10s
  19. 39m 26s
    1. The public appearance
      8m 52s
    2. Using a context for conditional code
      11m 37s
    3. Adding a default subject behavior
      6m 9s
    4. The public content area
      5m 51s
    5. Protecting page visibility
      6m 57s
  20. 1h 3m
    1. User authentication overview
      4m 3s
    2. Admin CRUD
      8m 41s
    3. Encrypting passwords
      7m 26s
    4. Salting passwords
      5m 42s
    5. Adding password encryption to CMS
      11m 54s
    6. New PHP password functions
      3m 13s
    7. Creating a login system
      11m 28s
    8. Checking for authorization
      5m 48s
    9. Creating a logout page
      5m 40s
  21. 2m 4s
    1. Next steps
      2m 4s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.