Tecnologies

Client: Firefox, HTML, CSS, JAVASCRIPT

Servidor: Apache, PHP, MySQL

https://github.com/gerardfp/webcms

lxc launch ubuntu:20.04 myweb

lxc exec myweb bash

Instal·la els paquets necessaris

apt update
apt install apache2 php mysql-server php-mysql

mysql -e "
DROP DATABASE IF EXISTS my_database;
DROP USER IF EXISTS 'my_user'@'localhost';

CREATE DATABASE my_database;
CREATE USER 'my_user'@'localhost' IDENTIFIED BY 'my_password'; 
GRANT ALL PRIVILEGES ON my_database.* TO 'my_user'@'localhost'; 
FLUSH PRIVILEGES;
CREATE TABLE my_database.posts(title TEXT, content TEXT);
"

mysql -e "
INSERT INTO my_database.posts VALUES ('hola mundo', 'este es el primer post');
INSERT INTO my_database.posts VALUES ('hola universo', 'este es el segundo post');
"
mysql -e "SELECT * FROM my_database.posts;"

index.php

<link rel="stylesheet" href="style.css">
<h1>MY BLOG!</h1>
<a href='new_post.php'>Crear nuevo post</a>

<?php
$mysqli = new mysqli("localhost", "my_user", "my_password", "my_database");

$res = $mysqli->query("SELECT * FROM posts");

$res->data_seek(0);
while ($row = $res->fetch_assoc()) {
    echo "<h2>" . $row['title'] . "</h2>\n";
    echo "<p>" . $row['content'] . "</p>\n";
}
?>

new_post.php

<link rel="stylesheet" href="style.css">

<form id="form" action="insert_post.php" method="get">
            <label for="title">Titulo:</label>
            <input id="title" type="text" name="title" size="46" required/>
            <label for="content">Contenido:</label>
            <textarea id="content" type="text" name="content" rows="8" cols="64" required></textarea>
            <input id="submit" type="submit" value="Crear post" disabled/>
</form>

<script>
document.getElementById('form').addEventListener("keyup", () => {
            document.getElementById("submit").disabled = !form.checkValidity();
});
</script>

insert_post.php

<link rel="stylesheet" href="style.css">

<?php
$mysqli = new mysqli("localhost", "my_user", "my_password", "my_database");

$stmt = $mysqli->prepare("INSERT INTO posts VALUES (?,?)");

$stmt->bind_param("ss", $titulo, $contenido);

$titulo = $_GET['title'];
$contenido = $_GET['content'];

$stmt->execute();

$stmt->close();

echo "<h3>Entrada añadida!</h3>";
echo "<a href='/'>Volver</a>";
?>

style.css

h1 {
    background-color: #135e96;
    color: white;
    padding: 16px;
}

a {
    background-color: #c9356e;
    color: white;
    padding: 16px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    background-color: #a9154e;
}

h2 {
    color: #135e96;
    padding-top: 64px;
    border-bottom: 1px solid #135e96;
}

p {
    background-color: #e1e1e9;
    padding:32px;
    border-radius: 4px;
}

h3 {
    background-color: #f1f1f1;
    border: 1px solid #919191;
    border-left: 4px solid #46b450;
    padding: 16px;
}

input, textarea {
    display: block;
    padding: 16px;
}

input[type=submit] {
    background-color: #46b450;
    color: white;
    padding: 16px;
    margin: 8px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #269430;
}

input[type=submit]:disabled {
    background-color: gray;
}

label {
    margin-top: 32px;
}