How do you add page links and manage changes to a page by changing a single file in PHP?
Tags: webdev, beginners, programming, php
Published: 2024-06-12 08:50:07

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.php` then 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
<!--html
  This example requires updating your template:

  ```
  <html class="h-full bg-gray-100">
  <body class="h-full">
  ```
-->
```

Add these in code as follows:

```html
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:

```html
  <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 `:hover` pseudo-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.php` file with a starting PHP tag (`<?php`) at the top.

## Second file 

This file is named as `index.php`

```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:

1. Copy the navigation bar code within the `<nav></nav>` tags.
2. Create a new directory and a new file named `nav.php` within it.
3. Paste the copied code into the `nav.php` file.
4. Include the address of the `nav.php` file in the same place where the original code was copied.

```php
<?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.