Programa de Estudio

Manual de la Asingatura

Evaluación y Evidencias

Bibliografía

Unidad I - Introducción a los sistemas web

Tema 1 - Herramientas a utilizar

Tema 2 - Ingeniería web

Tema 3 - Configuración de servidores web

Evaluación

Unidad II - Programación del lado del cliente

Tema 1 - HTML

Tema 2 - CSS

Tema 3 - JavaScript

Tema 4 - Animaciones y transformaciones en CSS

Tema 5 - Bootstrap

Evaluación

Unidad III - Programación del lado del servidor

Tema 1 - PHP

Tema 2 - MVC CRUD with php/mysql

Objetivos

Utilizar php y mysql para crear una conexión entre ellos
Aplicar principios de programación orientada a objetos en un sitio web
Agregar, editar, eliminar y consultar registros desde php a la base de datos
Comprender el funcionamiento de MVC (Model - View - Controller)

MVC (Model - View - Controller)

Paso1. Crea la siguiente estructura en una carpeta llamada crud dentro del htdocs de xampp:

    crud/
        controller/
            sportsController.php
        libs/
        model/
            sports.php
            sportsModel.php
        view/
            insert.php
            list.php
            update.php
        config.php
        index.php

Paso2. Dentro de la carpeta libs/ agrega los siguientes archivos:

Paso3. Crea una base de datos llamada prueba con una tabla llamada sports con los siguientes atributos:

    sports
    - > id int
    - > category varchar
    - > name varchar

Paso4. Dentro del archivo config.php agrega lo siguiente:

Se declara una clase llamada config en donde dentro de un constructor se asignaran a los valores iniciales de la configuración, las cuales son el host, user, password y nombre de la base de datos.

    < ?php
    class config
    {
        function __construct() {
            $this- > host = "localhost";
            $this- > user  = "root";
            $this- > pass = "";
            $this- > db = "crud";
        }
    }
    ? >

Paso5. Dentro del archivo index.php va lo siguiente:

Dentro del archivo index.php, quien es el archivo principal del proyecto por ser el que se va a ejecutar primero, se debe declarar el método session_unset() el cual si esque llega a haber variables de sesión las libera. La función require_once incluye el archivo sportsController.php solo una vez. Después se crea la instancia del sportsController y se manda llamar el método mvcHandler().

    < ?php
        session_unset();
        require_once  'controller/sportsController.php';
        $controller = new sportsController();
        $controller- > mvcHandler();
    ? >

Paso6. Modifica el modelo sports:

Dentro del modelo sports, localizado dentro de la carpeta model/ declara la siguiente clase sports, debe llevar el mismo nombre de tabla sports en la base de datos y los mismos campos declarados. Aquí se utilizan string messages que son los utlizados en las vistas.

    < ?php
    class sports
    {
        // table fields
        public $id;
        public $category;
        public $name;
        // message string
        public $id_msg;
        public $category_msg;
        public $name_msg;
        // constructor set default value
        function __construct()
        {
            $id=0;$category=$name="";
            $id_msg=$category_msg=$name_msg="";
        }
    }
    ? >

Paso7. Define dentro del sportsModel:

Dentro de sportsModel se crea el enlace de cada una de las propiedades y métodos con respecto a la base de datos:

    < ?php

      class sportsModel
      {
          // set database config for mysql
          function __construct($consetup)
          {
              $this- > host = $consetup- > host;
              $this- > user = $consetup- > user;
              $this- > pass =  $consetup- > pass;
              $this- > db = $consetup- > db;
          }
          // open mysql data base
          public function open_db()
          {
              $this- > condb=new mysqli($this- > host,$this- > user,$this- > pass,$this- > db);
              if ($this- > condb- > connect_error)
              {
                  die("Erron in connection: " . $this- > condb- > connect_error);
              }
          }
          // close database
          public function close_db()
          {
              $this- > condb- > close();
          }
          // insert record
          public function insertRecord($obj)
					{
						try
						{
							$this->open_db();
							$query=$this->condb->prepare("INSERT INTO sports (category,name) VALUES (?, ?)");
							$query->bind_param("ss",$obj->category,$obj->name);
							$query->execute();
							$res= $query->get_result();
							$last_id=$this->condb->insert_id;
							$query->close();
							$this->close_db();
							return $last_id;
						}
						catch (Exception $e)
						{
							$this->close_db();
            	throw $e;
        		}
					}
              //update record
          public function updateRecord($obj)
					{
						try
						{
							$this->open_db();
							$query=$this->condb->prepare("UPDATE sports SET category=?,name=? WHERE id=?");
							$query->bind_param("ssi", $obj->category,$obj->name,$obj->id);
							$query->execute();
							$res=$query->get_result();
							$query->close();
							$this->close_db();
							return true;
						}
						catch (Exception $e)
						{
            	$this->close_db();
            	throw $e;
        		}

					}
               // delete record
          public function deleteRecord($id)
					{
						try{
							$this->open_db();
							$query=$this->condb->prepare("DELETE FROM sports WHERE id=?");
							$query->bind_param("i",$id);
							$query->execute();
							$res=$query->get_result();
							$query->close();
							$this->close_db();
							return true;
						}
						catch (Exception $e)
						{
            	$this->closeDb();
            	throw $e;
        		}
					}
               // select record
          public function selectRecord($id)
					{
						try
						{
			                $this->open_db();
			                if($id>0)
							{
								$query=$this->condb->prepare("SELECT * FROM sports WHERE id=?");
								$query->bind_param("i",$id);
							}
			                else
			                {$query=$this->condb->prepare("SELECT * FROM sports");	}

							$query->execute();
							$res=$query->get_result();
							$query->close();
							$this->close_db();
			                return $res;
						}
						catch(Exception $e)
						{
							$this->close_db();
							throw $e;
						}

					}
      }
      ? >

Paso8. Define los métodos dentro del controlador sportsController:

< ?php
    require 'model/sportsModel.php';
    require 'model/sports.php';
    require_once 'config.php';

    session_status() === PHP_SESSION_ACTIVE ? TRUE : session_start();

	class sportsController
	{

 		function __construct()
		{
			$this- > objconfig = new config();
			$this- > objsm =  new sportsModel($this- > objconfig);
		}


        // mvc handler request
		public function mvcHandler()
		{
			$act = isset($_GET['act']) ? $_GET['act'] : NULL;
			switch ($act)
			{
                case 'add' :
					$this- > insert();
					break;
				case 'update':
					$this- > update();
					break;
				case 'delete' :
					$this - >  delete();
					break;
				default:
                    $this- > list();
			}
		}


        // page redirection
		public function pageRedirect($url)
		{
			header('Location:'.$url);
		}


        // check validation
		public function checkValidation($sporttb)
        {    $noerror=true;
            // Validate category
            if(empty($sporttb- > category)){
                $sporttb- > category_msg = "Field is empty.";$noerror=false;
            } elseif(!filter_var($sporttb- > category, FILTER_VALIDATE_REGEXP, array("options"=>array("regexp"=>"/^[a-zA-Z\s]+$/")))){
                $sporttb- > category_msg = "Invalid entry.";$noerror=false;
            }else{$sporttb- > category_msg ="";}
            // Validate name
            if(empty($sporttb- > name)){
                $sporttb- > name_msg = "Field is empty.";$noerror=false;
            } elseif(!filter_var($sporttb- > name, FILTER_VALIDATE_REGEXP, array("options"=>array("regexp"=>"/^[a-zA-Z\s]+$/")))){
                $sporttb- > name_msg = "Invalid entry.";$noerror=false;
            }else{$sporttb- > name_msg ="";}
            return $noerror;
        }


        // add new record
		public function insert()
		{
            try{
                $sporttb=new sports();
                if (isset($_POST['addbtn']))
                {
                    // read form value
                    $sporttb- > category = trim($_POST['category']);
                    $sporttb- > name = trim($_POST['name']);
                    //call validation
                    $chk=$this- > checkValidation($sporttb);
                    if($chk)
                    {
                        //call insert record
                        $pid = $this - >  objsm - > insertRecord($sporttb);
                        if($pid>0){
                            $this- > list();
                        }else{
                            echo "Somthing is wrong..., try again.";
                        }
                    }else
                    {
                        $_SESSION['sporttbl0']=serialize($sporttb);//add session obj
                        $this- > pageRedirect("view/insert.php");
                    }
                }
            }catch (Exception $e)
            {
                $this- > close_db();
                throw $e;
            }
        }


        // update record
        public function update()
		{
            try
            {

                if (isset($_POST['updatebtn']))
                {
                    $sporttb=unserialize($_SESSION['sporttbl0']);
                    $sporttb- > id = trim($_POST['id']);
                    $sporttb- > category = trim($_POST['category']);
                    $sporttb- > name = trim($_POST['name']);
                    // check validation
                    $chk=$this- > checkValidation($sporttb);
                    if($chk)
                    {
                        $res = $this - >  objsm - > updateRecord($sporttb);
                        if($res){
                            $this- > list();
                        }else{
                            echo "Somthing is wrong..., try again.";
                        }
                    }else
                    {
                        $_SESSION['sporttbl0']=serialize($sporttb);
                        $this- > pageRedirect("view/update.php");
                    }
                }elseif(isset($_GET["id"]) && !empty(trim($_GET["id"]))){
                    $id=$_GET['id'];
                    $result=$this- > objsm- > selectRecord($id);
                    $row=mysqli_fetch_array($result);
                    $sporttb=new sports();
                    $sporttb- > id=$row["id"];
                    $sporttb- > name=$row["name"];
                    $sporttb- > category=$row["category"];
                    $_SESSION['sporttbl0']=serialize($sporttb);
                    $this- > pageRedirect('view/update.php');
                }else{
                    echo "Invalid operation.";
                }
            }
            catch (Exception $e)
            {
                $this- > close_db();
                throw $e;
            }
        }


        // delete record
        public function delete()
		{
            try
            {
                if (isset($_GET['id']))
                {
                    $id=$_GET['id'];
                    $res=$this- > objsm- > deleteRecord($id);
                    if($res){
                        $this- > pageRedirect('index.php');
                    }else{
                        echo "Somthing is wrong..., try again.";
                    }
                }else{
                    echo "Invalid operation.";
                }
            }
            catch (Exception $e)
            {
                $this- > close_db();
                throw $e;
            }
        }
        public function list(){
            $result=$this- > objsm- > selectRecord(0);
            include "view/list.php";
        }
    }
? >

Paso9. Define las siguientes vistas:

Archivo insert.php

< ?php
require '../model/sports.php';
session_start();
$sporttb=isset($_SESSION['sporttbl0'])?unserialize($_SESSION['sporttbl0']):new sports();
? >
< !DOCTYPE html >
< html lang="en" >
< head >
    < meta charset="UTF-8" >
    < title >Create Record< /title >
    < link rel="stylesheet" href="../libs/bootstrap.css" >
    < style type="text/css" >
        .wrapper{
            width: 500px;
            margin: 0 auto;
        }
    < /style >
< /head >
< body >
    < div class="wrapper" >
        < div class="container-fluid" >
            < div class="row" >
                < div class="col-md-12" >
                    < div class="page-header" >
                        < h2 >Add Sports< /h2 >
                    < /div >
                    < p >Please fill this form and submit to add sports record in the database.< /p >
                    < form action="../index.php?act=add" method="post" >
                        < div class="form-group < ?php echo (!empty($sporttb- > category_msg)) ? 'has-error' : ''; ? >" >
                            < label >Sport Category< /label >
                            < input type="text" name="category" class="form-control" value="< ?php echo $sporttb- > category; ? >" >
                            < span class="help-block" >< ?php echo $sporttb- > category_msg;? >< /span >
                        < /div >
                        < div class="form-group < ?php echo (!empty($sporttb- > name_msg)) ? 'has-error' : ''; ? >" >
                            < label >Sports Name< /label >
                            < input name="name" class="form-control" value="< ?php echo $sporttb- > name; ? >" >
                            < span class="help-block" >< ?php echo $sporttb- > name_msg;? >< /span >
                        < /div >
                        < input type="submit" name="addbtn" class="btn btn-primary" value="Submit" >
                        < a href="../index.php" class="btn btn-default" >Cancel< /a >
                    < /form >
                < /div >
            < /div >
        < /div >
    < /div >
< /body >
< /html >

list.php

< ?php session_unset();? >
< !DOCTYPE html >
< html lang="en" >
< head >
    < meta charset="UTF-8" >
    < title >Dashboard< /title >
    < link href="~/../libs/fontawesome/css/font-awesome.css" rel="stylesheet" / >
    < link rel="stylesheet" href="~/../libs/bootstrap.css" >
    < script src="~/../libs/jquery.min.js" >< /script >
    < script src="~/../libs/bootstrap.js" >< /script >
    < style type="text/css" >
        .wrapper{
            width: 650px;
            margin: 0 auto;
        }
        .page-header h2{
            margin-top: 0;
        }
        table tr td:last-child a{
            margin-right: 15px;
        }
    < /style >
    < script type="text/javascript" >
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
        });
    < /script >
< /head >
< body >
    < div class="wrapper" >
        < div class="container-fluid" >
            < div class="row" >
                < div class="col-md-12" >
                    < div class="page-header clearfix" >
                        < a href="index.php" class="btn btn-success pull-left" >Home< /a >
                        < h2 class="pull-left" >Sports Details< /h2 >
                        < a href="view/insert.php" class="btn btn-success pull-right" >Add New Sports< /a >
                    < /div >
                    < ?php
                        if($result- > num_rows > 0){
                            echo " < table class='table table-bordered table-striped' > ";
                                echo " < thead > ";
                                    echo " < tr > ";
                                        echo " < th > # < /th > ";
                                        echo " < th > Sports Category < /th > ";
                                        echo " < th > Sports Name < /th > ";
                                        echo " < th > Action < /th > ";
                                    echo " < /tr > ";
                                echo " < /thead > ";
                                echo " < tbody > ";
                                while($row = mysqli_fetch_array($result)){
                                    echo " < tr > ";
                                        echo " < td > " . $row['id'] . " < /td > ";
                                        echo " < td > " . $row['category'] . " < /td > ";
                                        echo " < td > " . $row['name'] . " < /td > ";
                                        echo " < td > ";
                                        echo " < a href='index.php?act=update&id=". $row['id'] ."' title='Update Record' data-toggle='tooltip' > < i class='fa fa-edit' > < /i > < /a >";
                                        echo " < a href='index.php?act=delete&id=". $row['id'] ."' title='Delete Record' data-toggle='tooltip' > < i class='fa fa-trash' > < /i > < /a >";
                                        echo " < /td > ";
                                    echo " < /tr > ";
                                }
                                echo " < /tbody > ";
                            echo " < /table > ";
                            // Free result set
                            mysqli_free_result($result);
                        } else{
                            echo " < p class='lead' > < em > No records were found. < /em > < /p > ";
                        }
                    ?>
                < /div >
            < /div >
        < /div >
    < /div >
< /body >
< /html >

update.php

< ?php
require '../model/sports.php';
session_start();
$sporttb=isset($_SESSION['sporttbl0'])?unserialize($_SESSION['sporttbl0']):new sports();
? >
< !DOCTYPE html >
< html lang="en" >
< head >
    < meta charset="UTF-8" >
    < title >Create Record< /title >
    < link rel="stylesheet" href="../libs/bootstrap.css" >
    < style type="text/css" >
        .wrapper{
            width: 500px;
            margin: 0 auto;
        }
    < /style >
< /head >
< body >
    < div class="wrapper" >
        < div class="container-fluid" >
            < div class="row" >
                < div class="col-md-12" >
                    < div class="page-header" >
                        < h2 >Update Sports< /h2 >
                    < /div >
                    < p >Please fill this form and submit to add sports record in the database.< /p >
                    < form action="../index.php?act=update" method="post" >
                        < div class="form-group < ?php echo (!empty($sporttb- > category_msg)) ? 'has-error' : ''; ? > " >
                            < label > Sport Category < /label >
                            < input type="text" name="category" class="form-control" value=" < ?php echo $sporttb- > category; ? > " >
                            < span class="help-block" > < ?php echo $sporttb- > category_msg;? > < /span >
                        < /div >
                        < div class="form-group < ?php echo (!empty($sporttb- > name_msg)) ? 'has-error' : ''; ? > " >
                            < label > Sports Name < /label >
                            < input type="text" name="name" class="form-control" value=" < ?php echo $sporttb- > name; ? > " >
                            < span class="help-block" > < ?php echo $sporttb- > name_msg;? > < /span >
                        < /div >
                        < input type="hidden" name="id" value=" < ?php echo $sporttb- > id; ? > "/ >
                        < input type="submit" name="updatebtn" class="btn btn-primary" value="Submit" >
                        < a href="../index.php" class="btn btn-default" > Cancel < /a >
                    < /form >
                < /div >
            < /div >
        < /div >
    < /div >
< /body >
< /html >

Paso10. Probar en el navegador:

Descarga los archivos de la práctica en el siguiente enlace:

Tema 3 - CRUD Application with PHP, PDO, and MySQL

Tema 4 - Sistema de autenticación con PHP & MySQL

Tema 5 - Laravel

Tema 6 - Aplicación web con Laravel 8 utilizando bootstrap, login, crud generator

Tema 7 - Aplicación web con Laravel 8 sobre tablas relacionadas

Evaluación

Unidad IV - Autenticación de usuarios

Tema 1 - PHP API REST con Laravel 8 Lumen y Postman

Evaluación

Acerca de

Reglamento

INGENIERÍA

1ero

2do

3ro

5to

6to

7mo

8vo

9no

ITIANOS

1ero

2do

3ro

4to

5to

6to

7mo

8vo

9no

ITIANOS

TSU

1ro

2do

3ro

4to

5to

7mo

Ingeniería

7mo

8vo

9no

10mo

MECATRÓNICOS

TSU

1ro

2do

3ro

6to

Aplicaciones Web

TI TSU DSM 4A TN

Nombre de la asignatura:

Competencias

Cuatrimestre

Horas Prácticas

Horas Teóricas

Horas Totales

Horas Totales por Semana Cuatrimestre

Objetivo

Evaluaciones por Unidad

Tema 1 - Herramientas a utilizar

Tema 2 - Ingeniería web

Tema 3 - Configuración de servidores web

Evaluación

Tema 1 - HTML

Tema 2 - CSS

Tema 3 - JavaScript

Tema 4 - Animaciones y transformaciones en CSS

Tema 5 - Bootstrap

Evaluación

Tema 1 - Php

Tema 2 - MVC CRUD with php/mysql

Tema 3 - CRUD Application with PHP, PDO, and MySQL

Tema 4 - Sistema de autenticación con PHP & MySQL

Tema 5 - Laravel

Tema 6 - Aplicación web con Laravel 8 utilizando bootstrap, login, crud generator

Tema 7 - Aplicación web con Laravel 8 sobre tablas relacionadas

Evaluación

Tema 1 - PHP API REST con Laravel 8 Lumen y Postman

Evaluación