From 1b5fa4e89b6013584ef1f636c1ce5e14ec827836 Mon Sep 17 00:00:00 2001
From: Saumit Dinesan <justsaumit@protonmail.com>
Date: Tue, 3 Oct 2023 01:23:48 +0530
Subject: Lab04: HTML Form Validation- adding .env and README

---
 Lab04/.gitignore                |   1 +
 Lab04/Dockerfile                |   7 +++
 Lab04/README.md                 | 100 ++++++++++++++++++++++++++++++++++++++++
 Lab04/create_table.php          |  18 +++++---
 Lab04/docker-compose.yml        |  16 +++++--
 Lab04/insert.php                |  19 +++++---
 Lab04/media/screenshot_l4-0.png | Bin 0 -> 87856 bytes
 Lab04/media/screenshot_l4-1.png | Bin 0 -> 33859 bytes
 Lab04/media/screenshot_l4-2.png | Bin 0 -> 37489 bytes
 Lab04/media/screenshot_l4-3.png | Bin 0 -> 9506 bytes
 Lab04/media/screenshot_l4-4.png | Bin 0 -> 233016 bytes
 Lab04/media/screenshot_l4-5.png | Bin 0 -> 161467 bytes
 Lab04/media/screenshot_l4-6.png | Bin 0 -> 116308 bytes
 Lab04/media/screenshot_l4-7.png | Bin 0 -> 45295 bytes
 14 files changed, 144 insertions(+), 17 deletions(-)
 create mode 100644 Lab04/.gitignore
 create mode 100644 Lab04/README.md
 create mode 100644 Lab04/media/screenshot_l4-0.png
 create mode 100644 Lab04/media/screenshot_l4-1.png
 create mode 100644 Lab04/media/screenshot_l4-2.png
 create mode 100644 Lab04/media/screenshot_l4-3.png
 create mode 100644 Lab04/media/screenshot_l4-4.png
 create mode 100644 Lab04/media/screenshot_l4-5.png
 create mode 100644 Lab04/media/screenshot_l4-6.png
 create mode 100644 Lab04/media/screenshot_l4-7.png

(limited to 'Lab04')

diff --git a/Lab04/.gitignore b/Lab04/.gitignore
new file mode 100644
index 0000000..4c49bd7
--- /dev/null
+++ b/Lab04/.gitignore
@@ -0,0 +1 @@
+.env
diff --git a/Lab04/Dockerfile b/Lab04/Dockerfile
index 01effe1..f7c558c 100644
--- a/Lab04/Dockerfile
+++ b/Lab04/Dockerfile
@@ -1,7 +1,14 @@
 FROM php:7.4-apache
 
+RUN apt-get update && apt-get install -y unzip && rm -rf /var/lib/apt/lists/*
+
+RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
+
+# Install the PHP extension required for dotenv
 RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli
 
 COPY . /var/www/html
 
 WORKDIR /var/www/html
+
+RUN composer require vlucas/phpdotenv
diff --git a/Lab04/README.md b/Lab04/README.md
new file mode 100644
index 0000000..093e3c9
--- /dev/null
+++ b/Lab04/README.md
@@ -0,0 +1,100 @@
+# Lab04: HTML Form Validation
+
+This directory contains the necessary files for a simple registration form webpage.  
+The registration form collects various details from the user, such as their first name, last name, gender, registration number, phone number, email address, and department.
+
+## Table of Contents
+
+- [Description](#description)
+- [Screenshots](#screenshots)
+- [Usage](#usage)
+
+---
+
+## Description
+
+This repository contains code for a simple registration form with HTML form validation. The form collects user information such as first name, last name, gender, phone number, email address, city, and preferred department. It then inserts this information into a MySQL database using PHP.
+
+## Screenshots
+
+<img src="./media/screenshot_l4-0.png" alt="using portainer" style="max-height:250px;">
+<u><p style="text-align:center;">Using Portainer to Manage containers</p></u>
+
+<img src="./media/screenshot_l4-1.png" alt="using portainer" style="max-height:350px;max-width:none;">
+<u><p>Sample HTML Form</p></u>
+
+<img src="./media/screenshot_l4-2.png" alt="using portainer" style="max-height:350px;max-width:none;">
+<u><p>HTML Form Validation warning for empty fields being present after submission</p></u>
+
+## Usage
+
+### Prerequisites
+
+Before you can use this code, ensure you have the following software and dependencies installed as I would be leveragin docker containers for running Apache,PHP, MySQL database and phpMyAdmin:
+
+- Docker: [Docker Installation Guide](https://docs.docker.com/get-docker/)
+- Docker Compose: [Docker Compose Installation Guide](https://docs.docker.com/compose/install/)
+
+### Steps to Run the Application
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/justsaumit/WTWS.git
+   ```
+
+2. Navigate to the project directory:
+
+   ```bash
+   cd WTWS/Lab04
+   ```
+
+3. Create an `.env` file in the project root directory and configure the database and environment variables as needed (based on your preferences):
+
+   ```yaml
+   MYSQL_ROOT_PASSWORD=samplerootpassword
+   MYSQL_DATABASE=regformdata
+   MYSQL_USER=sampleusername
+   MYSQL_PASSWORD=sampleusername
+
+   DB_SERVER=db
+   DB_USERNAME=sampleusername
+   DB_PASSWORD=samplepassword
+   DB_NAME=regformdata
+   DB_TABLE=regtable
+   ```
+
+4. Build and start the Docker containers using Docker Compose:
+
+   ```bash
+   docker-compose up -d
+   ```
+
+5. Once the containers are up and running, you can access the registration form in your web browser at `http://localhost`. You can also access phpMyAdmin at `http://localhost:8080` to manage the MySQL database.
+
+6. To create the database table, open a web browser and navigate to `http://localhost/create_table.php`. This PHP script will create the necessary table in the database.
+
+    <img src="./media/screenshot_l4-3.png" alt="Successful table creation using php" style="max-height:250px;">
+    <u><p style="text-align:center;">Step 6: Create database table using php</p></u>
+
+7. Fill out the registration form and click "Submit" to insert the data into the database.
+
+   <img src="./media/screenshot_l4-5.png" alt="using portainer" style="max-height:350px;max-width:none;">
+   <u><p style="text-align:center;">Step 7: Fill out the registration form properly and click on Submit button</p></u>
+
+    <img src="./media/screenshot_l4-6.png" alt="using portainer" style="max-height:250px;">
+    <u><p style="text-align:center;">PHP output confirming successful data insertion in the database</p></u>
+
+8. To view the inserted data, you can use phpMyAdmin or connect to the MySQL database directly using your preferred MySQL client.
+
+    <img src="./media/screenshot_l4-4.png" alt="using portainer" style="max-height:350px;">
+    <u><p style="text-align:center;">Confirming table creation in phpMyAdmin</p></u>
+
+    <img src="./media/screenshot_l4-7.png" alt="using portainer" style="max-height:250px;">
+    <u><p style="text-align:center;">Confirming data insertion in phpMyAdmin</p></u>
+
+9. To stop and remove the Docker containers, run:
+
+   ```bash
+   docker-compose down
+   ```
diff --git a/Lab04/create_table.php b/Lab04/create_table.php
index 1cc0069..a704d5e 100644
--- a/Lab04/create_table.php
+++ b/Lab04/create_table.php
@@ -1,9 +1,15 @@
 <?php
-$servername = "db";
-$username = "example";
-$password = "example";
-$database = "regformdata";
-$tableName = "regtable";
+require __DIR__ . '/vendor/autoload.php';
+
+use Dotenv\Dotenv;
+$dotenv = Dotenv::createImmutable(__DIR__);
+$dotenv->load();
+
+$servername = getenv('DB_SERVER');
+$username = getenv('DB_USERNAME');
+$password = getenv('DB_PASSWORD');
+$database = getenv('DB_NAME');
+$tableName = getenv('DB_TABLE');
 
 // Create connection
 $conn = new mysqli($servername, $username, $password);
@@ -35,4 +41,4 @@ if ($conn->query($sql) === TRUE) {
 }
 
 $conn->close();
-?>
\ No newline at end of file
+?>
diff --git a/Lab04/docker-compose.yml b/Lab04/docker-compose.yml
index 1e40524..905fc89 100644
--- a/Lab04/docker-compose.yml
+++ b/Lab04/docker-compose.yml
@@ -5,10 +5,10 @@ services:
     image: mysql
     restart: always
     environment:
-      MYSQL_ROOT_PASSWORD: example
-      MYSQL_DATABASE: regformdata
-      MYSQL_USER: example
-      MYSQL_PASSWORD: example
+      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
+      MYSQL_DATABASE: ${MYSQL_DATABASE}
+      MYSQL_USER: ${MYSQL_USER}
+      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
     ports:
       - "3306:3306"
     volumes:
@@ -21,13 +21,19 @@ services:
     restart: always
     ports:
       - "80:80"
+    environment:
+      DB_SERVER: ${DB_SERVER}
+      DB_USERNAME: ${DB_USERNAME}
+      DB_PASSWORD: ${DB_PASSWORD}
+      DB_NAME: ${DB_NAME}
+      DB_TABLE: ${DB_TABLE}
 
   phpmyadmin:
     image: phpmyadmin/phpmyadmin
     restart: always
     environment:
       PMA_HOST: db
-      MYSQL_ROOT_PASSWORD: example
+      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
     ports:
       - "8080:80"
     depends_on:
diff --git a/Lab04/insert.php b/Lab04/insert.php
index 717842e..2172473 100644
--- a/Lab04/insert.php
+++ b/Lab04/insert.php
@@ -8,11 +8,18 @@
 <body>
     <center>
         <?php
-        $servername = "db";
-        $username = "example";
-        $password = "example";
-        $dbname = "regformdata";
-        $tablename = "regtable";
+        // Load environment variables from .env file
+        require __DIR__ . '/vendor/autoload.php';
+
+        use Dotenv\Dotenv;
+        $dotenv = Dotenv::createImmutable(__DIR__);
+        $dotenv->load();
+
+        $servername = getenv('DB_SERVER');
+        $username = getenv('DB_USERNAME');
+        $password = getenv('DB_PASSWORD');
+        $dbname = getenv('DB_NAME');
+        $tablename = getenv('DB_TABLE');
  
         // Create connection
         $conn = mysqli_connect($servername, $username, $password, $dbname);
@@ -51,4 +58,4 @@
     </center>
 </body>
  
-</html>
\ No newline at end of file
+</html>
diff --git a/Lab04/media/screenshot_l4-0.png b/Lab04/media/screenshot_l4-0.png
new file mode 100644
index 0000000..1dd389e
Binary files /dev/null and b/Lab04/media/screenshot_l4-0.png differ
diff --git a/Lab04/media/screenshot_l4-1.png b/Lab04/media/screenshot_l4-1.png
new file mode 100644
index 0000000..036a8fe
Binary files /dev/null and b/Lab04/media/screenshot_l4-1.png differ
diff --git a/Lab04/media/screenshot_l4-2.png b/Lab04/media/screenshot_l4-2.png
new file mode 100644
index 0000000..ba9fbed
Binary files /dev/null and b/Lab04/media/screenshot_l4-2.png differ
diff --git a/Lab04/media/screenshot_l4-3.png b/Lab04/media/screenshot_l4-3.png
new file mode 100644
index 0000000..6fd1e83
Binary files /dev/null and b/Lab04/media/screenshot_l4-3.png differ
diff --git a/Lab04/media/screenshot_l4-4.png b/Lab04/media/screenshot_l4-4.png
new file mode 100644
index 0000000..44d1a13
Binary files /dev/null and b/Lab04/media/screenshot_l4-4.png differ
diff --git a/Lab04/media/screenshot_l4-5.png b/Lab04/media/screenshot_l4-5.png
new file mode 100644
index 0000000..39f22a2
Binary files /dev/null and b/Lab04/media/screenshot_l4-5.png differ
diff --git a/Lab04/media/screenshot_l4-6.png b/Lab04/media/screenshot_l4-6.png
new file mode 100644
index 0000000..f6d065e
Binary files /dev/null and b/Lab04/media/screenshot_l4-6.png differ
diff --git a/Lab04/media/screenshot_l4-7.png b/Lab04/media/screenshot_l4-7.png
new file mode 100644
index 0000000..d3d26b6
Binary files /dev/null and b/Lab04/media/screenshot_l4-7.png differ
-- 
cgit v1.2.3