Se anche tu sei un web design o stai studiando per diventarlo
Se sei stanco di WordPress o di altri CMS
Se stai ancora creando siti web statici
Se desideri imparare il web dinamico
8 minuti
In questo video-tutorial, vedremo come settare l'ambiente di sviluppo in locale, per iniziare a programmare in PHP. Scaricando e installando nel nostro pc, il software MAMP, saremo in grado, in modo semplice e rapido, di impostare l'ambiente di sviluppo ideale. Mamp installerà nel nostro sistema i 3 componenti essenziali (PHP - Apache - MySql), per realizzare e testare le nostre pagine web in php.
9 minuti
In questo secondo video-tutorial, per la serie Programmare in PHP, vedremo come creare un Database locale con Mamp e MySql, con le relative tabelle, dove caricheremo i contenuti che dinamicamente richiameremo, grazie a php, all'interno delle nostre pagine web.
23 minuti
In questo 3° video della serie programmare in PHP - Dopo aver creato una semplice pagina web, composta da un menu e una cover-image, vedremo come renderla dinamica con mySql and PHP
<?php @include 'config-database.php'; ?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contenuti Dinamici</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="logo">LOGO</div>
<nav class="navbar">
<ul>
<li><a href="#"><?php echo''.$riga['Prima_voce'].'' ?></a></li>
<li><a href="#"><?php echo''.$riga['Seconda_voce'].'' ?></a></li>
<li><a href="#"><?php echo''.$riga['Terza_voce'].'' ?></a></li>
<li><a href="#"><?php echo''.$riga['Quarta_voce'].'' ?></a></li>
<li><a href="#" onclick="apri()">Area Privata</a></li>
</ul>
<div id="container-form" class="form-privata">
<form class="" action="Area_Privata/login.php" method="post">
<label for="user">Nome Utente</label>
<input type="text" name="user" id="user" value="" required>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" required>
<button id="accedi" type="submit" name="login">ACCEDI</button>
</form>
</div>
</nav>
</header>
<div
style="background-image:url(<?php echo'data:image/jpg;base64,'.base64_encode($riga1['cover_img'] ).'' ?>);
width:100vw;
height:100vh;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function apri() {
$('#container-form').toggleClass('aperto');
}
</script>
</body>
</html>
html, body{
margin:0;
padding:0;
}
*{
box-sizing:border-box;
}
.header{
background:#6760a3;
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:20px;
}
.logo{
padding:20px;
flex-basis:30%;
}
.navbar{
flex-basis:60%;
}
ul{
list-style-type:none;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
gap:40px;
}
a{
color:#ccc;
text-decoration:none;
font-size:1.4rem;
padding:10px;
}
/* .cover{
background-image:url(img/cover.jpg);
width:100vw;
height:100vh;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
} */
.form-privata{
background: #6760a3;
width: 400px;
height: auto;
padding:40px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right:0;
box-shadow:2px 3px 4px #000;
transform:scale(0);
transition:all .3s linear;
}
.form-privata form{
display: flex;
flex-direction: column;
gap: 20px;
}
.form-privata form input{
font-size: 1rem;
padding: 10px;
}
.form-privata form label{
font-size: 1.2rem;
text-align: center;
color: #ccc;
margin-bottom: -13px;
}
.aperto{
transform:scale(1);
}
#accedi{
border:none;
background:#9b9bf8;
padding:10px;
color:#fff;
font-size:1rem;
border-radius:5px;
margin-top:20px;
cursor:pointer;
transition:all .3s linear;
}
#accedi:hover{
background:#7d7dd9;
border:1px solid #ccc;
}
<?php
session_start();
$db_host = 'localhost'; // Nome del server
$db_user = 'root'; // Nome utente amministratore database
$db_password = 'root'; // Password database
$db_nomedb = 'Contenuti'; // Nome database
// Effettua la connessione al database
$mysqli = new mysqli($db_host, $db_user, $db_password, $db_nomedb) or die ('Errore nella stringa di connessione al database: '.mysqli_error());
//Lettura Tabella menu
$result = $mysqli->query("SELECT * FROM menu WHERE id = '1' ");
$riga = mysqli_fetch_array($result);
//Lettura Tabella cover
$result1 = $mysqli->query("SELECT * FROM cover WHERE id = '1' ");
$riga1 = mysqli_fetch_array($result1);
//Lettura Tabella privata
$query1 = $mysqli->query("SELECT * FROM privata WHERE id = '1' ");
$riga2 = mysqli_fetch_array($query1);
?>
Clicca per scaricare il file upload.php
48 minuti
In questo 4° video della serie Programmare in php, ci occuperemo della realizzazione dell' area privata di accesso alla dashboard che gestirà il sito web.
<?php
session_start(); // Inizio della Session
// Se non viene definita una variabile di sessione, l'utente viene rimandato alla homepage
IF(!isset($_SESSION['login']))
{
header('Location: ../index.php');
exit;
}
@include 'Area_Privata/config.php';
@include '../config-database.php';
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contenuti Dinamici</title>
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body id="backend">
<header class="header header-backend">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<div class="sidebar">
<img id="iconaUser" src="<?php echo'data:image/jpg;base64,'.base64_encode($riga2['user_img']).''?>" alt="">
<h3>Benvenuto <br /><?php echo''.$riga2['user'].'' ?></h3>
<h1>Dashboard</h1>
<form action="upload.php" method="post" enctype="multipart/form-data">
<div class="container-itemsMenu">
<h4>Gestione Menu</h4>
<p><input class="input" type="text" name="Prima_voce" value="<?php echo''.$riga['Prima_voce'].'' ?>"></p>
<p><input class="input" type="text" name="Seconda_voce" value="<?php echo''.$riga['Seconda_voce'].'' ?>"></p>
<p><input class="input" type="text" name="Terza_voce" value="<?php echo''.$riga['Terza_voce'].'' ?>"></p>
<p><input class="input" type="text" name="Quarta_voce" value="<?php echo''.$riga['Quarta_voce'].'' ?>"></p>
</div>
<div class="container-itemsImg">
<h4>Gestione Cover</h4>
<img id="cover" src="<?php echo'data:image/jpg;base64,'.base64_encode($riga1['cover_img'] ).'' ?>" alt="">
<label for="cover_img" title="Carica un’ immagine per la tua cover">
<a id="addImg" class="material-symbols-outlined">add_a_photo</a>
</label>
<input id="cover_img" class="img" type="file" name="cover_img" set-to="cover_img" />
</div>
<ul>
<li><a href="#" onclick="gestisciImg(), rimuovigestisciMenu();" title="Gestisci Immagini"><div class="material-symbols-outlined icone">photo_library</div><h3 style="top:233px;">Cover</h3></a></li>
<li><a href="#" onclick="gestisciMenu(), rimuovigestisciImg();"title="Gestisci menu"><div class="material-symbols-outlined icone-menu">list</div><h3 style="top:284px;">Menu</h3></a></li>
</ul>
</div>
</div>
<div class="pulsanti">
<button class="pulsante" type="submit">Salva Modifiche</button>
<button class="pulsante pulsante-logout" type="button" name="logout"><a href="logout.php">Logout</a></button>
</div>
</form>
</header>
<script>
function gestisciImg() {
$('.container-itemsImg').toggleClass('comparsa');
}
function gestisciMenu() {
$('.container-itemsMenu').toggleClass('comparsa');
}
function rimuovigestisciImg() {
$('.container-itemsImg').removeClass('comparsa');
}
function rimuovigestisciMenu() {
$('.container-itemsMenu').removeClass('comparsa');
}
</script>
</body>
</html>
/* Style backend */
.header-backend {
min-height: 100px;
background: #282828;
justify-content: center;
align-items: center;
box-shadow: 2px 3px 4px #261b1b;
}
span{
position:absolute;
width:20px;
height:3px;
background:#ccc;
cursor: pointer;
border-radius: 5px;
transition:all .3s linear;
}
span:nth-child(1){
margin-top:6px;
}
span:nth-child(2){
margin-top:12px;
}
#menuToggle
{
flex-basis:70%;
position: relative;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 8px;
left: -11px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #a77f7f;
border-radius: 3px;
z-index: 1;
transform-origin: 38px 13px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle:hover span
{
background: #fff;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle h3{
position: absolute;
top: 150px;
left: -90px;
text-align: center;
font-size:0.7rem;
}
#menuToggle h1{
position: absolute;
transform: translateX(300px);
}
h4{
font-size:1.2rem;
}
.container-itemsMenu, .container-itemsImg{
display: flex;
flex-direction: column;
align-items: center;
transform: translate(270px, 87px) scale(0);
gap: 20px;
width: 60rem;
height: 400px;
transition:all .3s linear;
}
.container-itemsMenu p{
margin-top: 30px;
transition:all .3s linear;
transform: translate(270px, 87px) scale(1);
}
.input{
opacity: 1!important;
color: #ccc;
top: 0!important;
background: transparent;
border: none;
font-size: 1.6rem;
width: auto!important;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(-45deg) translate(-2px, -1px);
background: #fff;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(45deg) translate(-8px, -7px);
}
#menuToggle input:checked ~ .sidebar{
transform:translateX(-60px) translateY(30px);
}
#menuToggle input:checked ~ .sidebar #iconaUser{
transform: scale(3.9) translate(-25px, 20px);
}
#menuToggle input:checked ~ .sidebar .icone{
margin-top:200px;
transform: scale(1.5) translate(-114px, 30px);
}
#menuToggle input:checked ~ .sidebar .icone-menu{
margin-top:250px;
transform: scale(1.5) translate(-114px, 30px);
}
#menuToggle input:checked ~ .sidebar h3{
transform: scale(1.5) translate(115px, 20px);
}
.comparsa{
transform:translate(270px, 87px) scale(1)!important;
}
#cover{
width: 600px;
height: auto;
border-radius: 0;
transform: translate(0, -375px);
position: absolute;
border: 2px solid #548082;
border-radius: 20px;
box-shadow:2px 4px 5px #548082;
}
#addImg{
cursor:pointer;
position: absolute;
font-size: 3rem;
transform: translate(278px, -410px);
background: #548082;
border-radius: 10px;
color: #edf5ed;
padding: 5px;
transition:all .3s linear;
}
#addImg:hover{
transform:translate(278px, -410px) scale(0.8);
}
.pulsanti{
flex-basis:20%;
}
.pulsante{
background: transparent;
height: 40px;
border: none;
border:2px solid #548082;
cursor: pointer;
border-radius: 5px;
color: white;
transition:all .3s linear;
}
.pulsante-logout{position:absolute;margin-left:20px;}
.pulsante:hover{
border:2px solid #fff;
}
#backend{
overflow: hidden;
color:#ccc;
background:#1f1f1f;
font-family: "Avenir Next", "Avenir", sans-serif;
}
.sidebar{
position: absolute;
background:#282828;
display:flex;
flex-direction:column;
width:250px;
height:100vh;
box-shadow: 2px 3px 4px #261b1b;
transition:all .3s linear;
transform: translateX(-244px) translateY(30px);
}
.sidebar #iconaUser, .icone, .icone-menu{
border-radius: 50%;
width: 30px;
height: 30px;
position: absolute;
left: 200px;
top: 20px;
transition:all .3s linear;
}
.sidebar .icone{
margin-top: 50px;
}
.sidebar .icone-menu{
margin-top: 100px;
}
<?php
session_start();
$db_host = 'localhost'; // Nome del server
$db_user = 'root'; // Nome utente amministratore database
$db_password = 'root'; // Password database
$db_nomedb = 'Contenuti'; // Nome database
// Effettua la connessione al database
$mysqli = new mysqli($db_host, $db_user, $db_password, $db_nomedb) or die ('Errore nella stringa di connessione al database: '.mysqli_error());
//Lettura Tabella privata
$query1 = $mysqli->query("SELECT * FROM privata WHERE id = '1' ");
$riga2 = mysqli_fetch_array($query1);
?>
<?php
session_start(); // inizia la sessione
// Includo la connessione al database
require('config.php');
// Se il modulo viene inviato...
if(isset($_POST['login']))
{
// Dati inviati dal modulo
$user = (isset($_POST['user'])) ? trim($_POST['user']) : ''; // Metto nella variabile 'user' il dato inviato dal modulo
$pass = (isset($_POST['pass'])) ? trim($_POST['pass']) : ''; // Metto nella variabile 'pass' il dato inviato dal modulo
// Cripto la password e la confronto con quella del campo pass del Database
$pass = md5($pass);
// Controllo se l'utente esiste
$query1 = $mysqli->query("SELECT id, user, pass FROM privata WHERE user = '$user' AND pass = '$pass' LIMIT 1");
// Se trova un record
if(mysqli_num_rows($query1) == 1)
{
//prelevo l'id dal database
$login = mysqli_fetch_array($query1);
// Creo una variabile di sessione
$_SESSION['login'] = $login['id'];
// Creo un array contenente l'id, il nome utente e la password dell'operatore
$_SESSION['login'] = array($login['id'], $login['user'], $login['pass']);
echo $_SESSION['login'][0]; // Recupero l'id dell'utente che ha registrato la sessione
echo $_SESSION['login'][1]; // Recupero il nome utente dell'utente che ha registrato la sessione
// Rendirizzo l'Utente
header('Location: backend.php');
}
else
// Se non esiste visualizzo il messaggio di errore
echo("<h3 style='text-align:center;background:red;color:#fff;padding:20px;'>Nome utente o password errati!</h3>");
header("Refresh:4 url=../");
}
?>
<?php
// Includo la connessione al database
require('config.php');
// Esegue il logout cancellando la sessione
session_destroy();
header("location: ../index.php");
?>