Today I have learned to add page links in PHP project. And also know how to manage files that contains the data of pages.
Important must read
Firstly you have to go to website https:/www.tailwindui.com to check different layouts or design of home pages to create like that.
As you have chosen your design, at right corner of design there is an option to copy the code. Copy it and then follow next steps.
Diving in code
In vs code project(version 1.
90 at the time of working)
, we need following dependencies:
HTML5 basic code
CSS for styling pages
PHP page creation
On VS Code Side
- Firstly open the software that is installed on your system and then start a new project named
index.view.phpthen input ! and hit enter to get HTML5 basic code . - Go to the
<body>tag and paste the code you copied from the Tailwind website. When you paste the code, you'll notice comments at the beginning of the copied code."
<!--html
This example requires updating your template:
```
<html class="h-full bg-gray-100">
<body class="h-full">
```
-->
Add these in code as follows:
DOCTYPE html>
<html lang="en" class="h-full bg-gray-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="h-full">
Buttons on web page with link
- The next section of code, copied from the website, contains a list of buttons - 'Home', 'About', 'Contact Us', and 'Testing' - that appear on the output screen. These buttons contain links that direct the user to the corresponding next page, where relevant data is available.
A page link is present in anchor tag <a> <\a> of HTML as:
<a href="/" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white" aria-current="page">Home</a>
<a href="/abput.php" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">About</a>
<a href="/contact.php" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Contact Us</a>
<a href="/testing.php" class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Testing</a>
The button styling is also applied to the anchor tag with the link, using the
:hoverpseudo-class to change the button's state when pressed.After adding this code, a blank screen appears when debugging and running the code. To resolve this issue, add the
index.view.phpfile with a starting PHP tag (<?php) at the top.
Second file
This file is named as index.php
<?php
require"Index.view.php";
Now the output will show.
I hope that you have clearly understand everything.
Manage page by changing single file
To make changes to a page by modifying a single file, copy the navigation bar code within the <nav></nav> tags. Create a new directory and a new file named nav.php within it, and paste the code into this file. To utilize this file for the rest of the project, include its address in the same place from where the original code was copied.
Here's a summary of the steps:
- Copy the navigation bar code within the
<nav></nav>tags. - Create a new directory and a new file named
nav.phpwithin it. - Paste the copied code into the
nav.phpfile. - Include the address of the
nav.phpfile in the same place where the original code was copied.
<?php require('particles/nav.php') ?>
By doing this, you can manage changes to the navigation bar from a single file (nav.php) and have the updates reflected across all pages that include it.
I hope that you have understand it.
Top comments (0)