Windows Hosting or Linux Hosting: Which is the Best Fit for Your Website?
June 11, 2024
How to Connect Your PHP Website to a MySQL Database
June 12, 2024How to Create a Starter PHP Website
Are you looking to dive into web development with PHP? Building a starter PHP website is a great way to get your feet wet. PHP is a popular server-side scripting language that powers many websites and web applications. In this guide, we’ll walk you through creating a basic PHP website from scratch. We’ll cover setting up your environment, creating a simple web page, and using PHP to add dynamic content.
Setting Up Your Environment
Before we start coding, you’ll need to set up your development environment. Here’s what you’ll need:
- Web Server: Apache or Nginx
- PHP: Version 7.4 or higher
- Database: MySQL (optional for this tutorial)
You can use software bundles like XAMPP (for Windows) or MAMP (for Mac) that include Apache, PHP, and MySQL in one package. Alternatively, you can set up a LAMP stack (Linux, Apache, MySQL, PHP) on a Linux machine.
Step 1: Setting Up Your Project Directory
First, create a directory for your project. This will be the root folder for your website.
shCopy codemkdir my_php_website
cd my_php_website
Step 2: Creating Your First PHP File
In your project directory, create a new file named index.php. This will be the main entry point for your website.
phpCopy code<?php
// index.php
echo "Hello, World!";
?>
Save the file and open it in your web browser. If your server is set up correctly, you should see “Hello, World!” displayed.
Step 3: Using PHP to Add Dynamic Content
Next, let’s use PHP to make our website a bit more dynamic. We’ll add the current date and time.
phpCopy code<?php
// index.php
echo "Hello, World!";
echo "<br>";
echo "Current date and time is: " . date('Y-m-d H:i:s');
?>
Step 4: Creating a Basic HTML Template
A real website will have HTML structure along with PHP. Let’s create a basic HTML template and embed PHP within it.
phpCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My PHP Website</title>
</head>
<body>
<h1>Welcome to My PHP Website</h1>
<p><?php echo "Hello, World!"; ?></p>
<p>Current date and time is: <?php echo date('Y-m-d H:i:s'); ?></p>
</body>
</html>
Step 5: Creating a Navigation Menu
Let’s add a navigation menu to our website. We’ll create two more pages: about.php and contact.php.
First, create the about.php file:
phpCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>Learn more about us on this page.</p>
<a href="index.php">Home</a>
<a href="contact.php">Contact</a>
</body>
</html>
Next, create the contact.php file:
phpCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<p>Get in touch with us through this page.</p>
<a href="index.php">Home</a>
<a href="about.php">About</a>
</body>
</html>
Finally, update index.php to include the navigation menu:
phpCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My PHP Website</title>
</head>
<body>
<h1>Welcome to My PHP Website</h1>
<nav>
<a href="about.php">About</a>
<a href="contact.php">Contact</a>
</nav>
<p><?php echo "Hello, World!"; ?></p>
<p>Current date and time is: <?php echo date('Y-m-d H:i:s'); ?></p>
</body>
</html>
Step 6: Styling Your Website with CSS
Let’s add some basic styling to make our website look better. Create a styles.css file in your project directory:
cssCopy code/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
margin: 20px;
}
nav a {
margin: 0 10px;
text-decoration: none;
color: #333;
}
p {
margin: 20px;
}
Link the CSS file in your PHP files. For example, update index.php:
phpCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My PHP Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My PHP Website</h1>
<nav>
<a href="about.php">About</a>
<a href="contact.php">Contact</a>
</nav>
<p><?php echo "Hello, World!"; ?></p>
<p>Current date and time is: <?php echo date('Y-m-d H:i:s'); ?></p>
</body>
</html>
Conclusion
Congratulations! You’ve created a basic PHP website with a home page, an about page, and a contact page. You also learned how to add dynamic content using PHP and style your website with CSS. This is just the beginning. You can now start exploring more advanced PHP features, such as working with forms, handling user input, and connecting to a database.
Happy coding!
Why not try the next step and connect a database in this post
