Ciao Mattia,
ho creato questa pagina che contiene due template (uno che contiene del testo e un immagine a DX e uno che contiene testo ed una img a SX). Mi piacerebbe utilizzare questo template collegato ad uno scriptino di inserimento testo ed immagini (backend), dal quale mi dovrebbe esportare (in output) delle immagini jpeg o png col risultato come l'immagine in allegato.
Come mi consiglieresti di agire? Considerando che ogni volta i dati che gestirò dallo scriptino saranno:
- Titolo
- Testo di descrizione
- Immagine (con scelta di allineamento a DX o a SX).
Una volta inseriti questi dati dovrebbe essere possibile generare la jpg o png come immagini in allegato.
(07/05/2015 17:53)Mattia Ha scritto: In generale, se vuoi generare un'immagine di PHP, la libreria più diffusa è l'estensione GD. Qui trovi la guida sul sito ufficiale di PHP.
Se vuoi trasformare un pagina HTML direttamente in un'immagine, puoi trasformare prima la pagina HTML in PDF con TCPDF (qui trovi un esempio).
Poi puoi trasformare il PDF in un'immagine usando la libreria ImageMagick con questo semplice codice:
Codice PHP:
$imagick = new Imagick(); $imagick->readImage('file.pdf'); $imagick->writeImage('file.jpg');
Procederei per gradi, per prima cosa vorrei collegare questa pagina alla prima per la gestione di testo ed immagini.
Come dovrei fare per sviluppare questo piccolo script backend?
Per prima cosa dovresti pensare a dove salvare i dati. Lo strumento più utilizzato in PHP è il database MySQL. Qui trovi una guida pratica che spiega come utilizzare MySQL con PHP. In quella guida spiega come realizzare un blog, ma, se tieni presente che i post sarebbero i singoli elementi (titolo + testo + immagine + allineamento), basta che la segui punto per punto fino al 13 per fare un pannello d'amministrazione.
Con i punti 14 e 15 puoi fare la creazione della pagina HTML, ma pensaci dopo aver fatto il pannello d'amministrazione.
Ciao Mattia,
dunque ho scaricato adminer, caricato il file php sul mio spazio web, e ho creato il database templates.db
Ho inoltre creato la tabella screen con i registri:
Immagine => integer
Titolo => text
Testo => text
I campi della tabella dovranno essere:
Id (integer): identificativo del singolo elemento
Titolo (text)
Testo (text)
Immagine (text): nome del file che caricherai
Posizione (text): qui puoi scegliere diversi tipi, ma avendo un campo di testo potrai specificare diverse posizioni oltre a sinistra e destra in futuro.
La pagina "edit.html" dovrà contenere un form in HTML e la parte in PHP per estrarre i dati del singolo elemento e salvarli successivamente.
In un post non riesco a spiegarti tutto il funzionamento, ma puoi seguire la guida che ti ho suggerito in questo messaggio.
ok, credo di aver fatto un pasticcio, ma faccio confusione nelle differenze tra mySQL e sqlite, dunque edit.html è diventato edit.php e questo è il codice (che ti chiedo di aiutarmi a sistemare):
Codice:
<php?
// funzione per la connessione a SQLite
public function connetti()
{
if(!$this->attiva)
{
if($connessione = sqlite_open($this->nomehost,$this->nomeuser,$this->password) or die (sqlite_error()))
{
// selezione del database
$selezione = sqlite_select_db($this->nomedb,$connessione) or die (mysql_error());
}
}else{
return true;
}
}
?>
<title>Crea Screen</title>
</head>
Il metodo connetti dovrebbe stare all'interno di una classe e non libero (infatti viene usata la variabile $this). Ti conviene copiare la classe del database in un file esterno visto che la userai anche in altre parti (copia quella della guida e modifica le funzioni di MySQL con quelle relative di SQLite.
Sì, a un database SQLite ci si può collegare anche senza username e password.
15/05/2015 11:46 (Questo messaggio è stato modificato l'ultima volta il: 15/05/2015 11:49 da Chandler.)
Ho creato il file config.php con questo codice:
Codice:
<?php
class MysqlClass
{
// parametri per la connessione al database
private $nomehost = "localhost";
private $nomeuser = "username";
private $password = "password";
// controllo sulle connessioni attive
private $attiva = false;
// funzione per la connessione a SQLite
public function connetti()
{
if(!$this->attiva)
{
$connessione = sqlite_open($this->nomehost,$this->nomeuser,$this->password);
}else{
return true;
}
}
}
?>
l'unico dubbio è se class MysqlClass diventa class sqliteClass oppure no, inoltre si dovrebbe rimuovere tutta la parte di connessione al database, giusto? Infine in sqlite_open devo mettere il nome del db (in questo caso templates.db) su $this oppure lascio così com'è?
Sulla pagina edit.html invece che devo fa?
al momento l'ho modificata così:
Codice:
<php?
// inclusione del file contenente la classe
include "config.php"
// istanza della classe
$data = new MysqlClass();
// chiamata alla funzione di connessione
$data->connetti();
?>
<title>Crea Screen</title>
</head>
17/05/2015 18:11 (Questo messaggio è stato modificato l'ultima volta il: 17/05/2015 18:18 da Chandler.)
Ciao Mattia,
adesso la pagina config è così:
Codice:
<?php
class MysqlClass
{
// parametri per la connessione al database
private $nomefile = 'template.db';
// controllo sulle connessioni attive
private $attiva = false;
// funzione per la connessione a SQLite
public function connetti()
{
if(!$this->attiva)
{
$connessione = sqlite_open($this->nomefile);
}else{
return true;
}
}
}
?>
mentre edit è diventata così:
Codice:
<?php
// inizializzazione della sessione
session_start();
// valorizzazione delle variabili con i parametri dal form
if(isset($_POST['submit'])&&($_POST['submit']=="Scrivi")){
// inclusione del file della classe
include "config.php";
// istanza della classe
$data = new MysqlClass();
// chiamata alla funzione di connessione
$data->connetti();
$t = "post"; # nome della tabella
$v = array ($titolo,$testo,$immagine,$posizione,date("Y-m-d")); # valori da inserire
$r = "titolo_post,testo_post,autore_post,data_post"; # campi da popolare
// chiamata alla funzione per l'inserimento dei dati
$data->inserisci($t,$v,$r);
echo "Template generato con successo.";
// disconnessione
$data->disconnetti();
}else{
// form per l'inserimento
?>
<title>Crea Screen</title>
</head>
TITOLO <br />
<input name="titolo" type="text"><br />
<textarea name="testo" rows="5" cols="40">
inserisci il testo
</textarea>
<input name="submit" type="submit" value="Crea Screenshot">
</form>
</body>
</html><?
}
?>
Ho rimosso la parte di login che reindirizzata alla index, ma ho ancora perplessità per $t = "post" che non capisco se devo sostituirlo con "screen" che è il nome della tabella che ho creato dentro templates.db. Inoltre ho due input per la selezione dell'immagine e upload e non so quale devo modificare...
Alla classe "MysqlClass" devi aggiungere il metodo "inserisci" che trovi in questa lezione della guida dove spiega anche come usarlo.
In "edit.php":
alla variabile $t devi assegnare il nome della tabella (quindi nel tuo caso, "screen");
alla variabile $v devi assegnare i valori da inserire (vanno bene le variabili che hai inserito, ma devi togliere l'ultima perché non hai nessuno campo dove salvi la data attuale e la variabile dell'immagine non va bene, perché prima devi caricare l'immagine [guida] e alla variabile devi assegnare il percorso);
alla variabile $r devi inserire i nomi dei campi della tabella (nello stesso ordine in cui li hai inseriti in $v.
Visto che carichi una sola immagine, il campo di input diventa:
// inclusione del file della classe
include "config.php";
// istanza della classe
$data = new MysqlClass();
// chiamata alla funzione di connessione
$data->connetti();
$t = "screen"; # nome della tabella
$v = array ($titolo,$testo,$immagine,$posizione); # valori da inserire
$r = "titolo_screen,testo_screen,immagine_screen,posizione_screen"; # campi da popolare
// chiamata alla funzione per l'inserimento dei dati
$data->inserisci($t,$v,$r);
echo "Template generato con successo.";
// disconnessione
$data->disconnetti();
}else{
// form per l'inserimento
Forse devi modificare la variabile $r, perché non penso che ai nomi dei campi hai aggiunto uno "_screen" finale.
Devi spostare l'upload prima dell'assegnazione delle variabili $t, $v e $r.
Dove c'è $_FILES['user_file'] devi mettere $_FILES['upload'] visto che il nome del campo per selezionare il file da caricare si chiama "upload".
Per salvare il percorso dell'immagine nel database, subito dopo la funzione move_uploaded_file devi inserire:
19/05/2015 11:25 (Questo messaggio è stato modificato l'ultima volta il: 19/05/2015 11:57 da Chandler.)
Dunque, avevo dimenticato il titoletto (che eventualmente va prima del titolo), quindi ho aggiunto questo valore nella tabella come text e quindi ho sistemato la pagina così:
Codice:
<?php
// inizializzazione della sessione
session_start();
// valorizzazione delle variabili con i parametri dal form
if(isset($_POST['submit'])&&($_POST['submit']=="Scrivi")){
// inclusione del file della classe
include "config.php";
// istanza della classe
$data = new MysqlClass();
// chiamata alla funzione di connessione
$data->connetti();
// form per l'inserimento immagine
define(“UPLOAD_DIR”, “./uploads/”);
$t = "screen"; # nome della tabella
$v = array ($titoletto,$titolo,$testo,$immagine,$posizione); # valori da inserire
$r = "titoletto,titolo,testo,immagine,posizione"; # campi da popolare
// chiamata alla funzione per l'inserimento dei dati
$data->inserisci($t,$v,$r);
echo "Template generato con successo.";
// disconnessione
$data->disconnetti();
}else{
Se tutto è corretto dovrò, adesso, collegare i dati salvati alla pagina templates.html che avevo messo nella parte iniziale del post (e che a questo punto ti rimetto qui di seguito):
<article class="teaser left landscape">
<figure class="js-animate ">
<picture>
<source srcset="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/BDF-Elements/_homeprojectlandscape/Header_01.jpg" media="(max-width: 1000px)">
<!--<source srcset="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/BDF-Elements/_homeprojectlandscape/Header_01.jpg" media="(min-width: 800px)">-->
<img src= "http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/BDF-Elements/_homeprojectlandscape/Header_01.jpg" class="mainImg" alt="BDF Energy in the room" />
</picture>
</figure>
<div class="teaser-details js-animate">
<h3>titoletto</h3>
<h5>Titolo</h5>
<div class="container">
<div class="desc"><p>
<p>lorem ipsum dolor sit amet</p></p></div></a>
</div> <br />
<div clas="readmore"></div>
</div>
</article>
<article class="teaser right square">
<figure class="js-animate award">
<picture>
<source srcset="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/Eagle-Adventure-Tours/_homeprojectlandscape/Header_141001.jpg" media="(max-width: 1000px)">
<!--<source srcset="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/Eagle-Adventure-Tours/_homeprojectsquare/EAT_Teaser_1308x1308.jpg" media="(min-width: 800px)">-->
<img src="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/Eagle-Adventure-Tours/_homeprojectsquare/EAT_Teaser_1308x1308.jpg" class="mainImg" alt="Eagle Adventure Tours USA Trips for Bikers" />
</picture>
</figure>
<div class="teaser-details js-animate">
<h3>titoletto</h3>
<h5>Titolo</h5>
<div class="container">
<div class="desc"><p>
<p>Lorem ipsum dolor sit met et ce que si no forse.</p></p></div>
</div>
<div clas="readmore"></div>
Dove assegni il valore di $_POST['titoletto'], devi modificare il nome della variabile da $titolo a $titoletto.
Puoi cancellare queste righe di codice, perché l'immagine viene gestita nell'upload:
Codice PHP:
if (isset($_POST['immagine'])) { $immagine = addslashes(filter_var($_POST['immagine'], FILTER_SANITIZE_STRING)); }
Adesso dovresti provare a controllare che vengano salvati correttamente tutti i dati nel database e che venga caricata l'immagine.
Se funziona tutto, puoi seguire questa lezione della guida per estrarre i dati dal database.
19/05/2015 12:07 (Questo messaggio è stato modificato l'ultima volta il: 19/05/2015 15:22 da Chandler.)
mi da un errore sul file edit:
Citazione:Parse error: syntax error, unexpected '/' in /membri/indamecs/templates/edit.php on line 28
p.s. mentre mi rispondevi ho corretto il msg precedente alla tua risposta...
ho inoltre rinominato templates.html in templates.php e ho provato a sistemare la prima parte di codice così (per capire se sto facendo bene):
Codice:
<html>
<head>
<title>Home</title>
</head>
<body class="homepage homepage block">
<link rel="alternate" type="application/rss+xml" title="" href="feed.rss" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" value="notranslate" />
<link rel="stylesheet" href="screen.css?c=2" media="screen" type="text/css" />
<link rel="stylesheet" href="print.css?c=2" media="print" type="text/css" />
<script data-main="/" src="require.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'>
<?php
// inclusione del file di classe
include "config.php";
// istanza della classe
$data = new MysqlClass();
// chiamata alla funzione di connessione
$data->connetti();
// query per l'estrazione dei record
$screen_sql = $data->query("SELECT * FROM post ORDER BY screen DESC");
// controllo sul numero di records presenti in tabella
if(sqlite_num_rows($screen_sql) > 0){
// estrazione dei record tramite ciclo
while($screen_obj = $data->estrai($screen_sql)){
$id = $screen_obj->id;
$titoletto = stripslashes($screen_obj->titoletto);
$titolo = stripslashes($screen_obj->titolo);
$testo = stripslashes($screen_obj->testo);
$immagine = stripslashes($screen_obj->immagine);
$posizione = $screen_obj->posizione;
?>
<section id="projects" class="lines">
<div class="inner">
<article class="teaser left landscape">
<figure class="js-animate ">
<picture>
<source srcset="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/BDF-Elements/_homeprojectlandscape/Header_01.jpg" media="(max-width: 1000px)">
<img src= "http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/BDF-Elements/_homeprojectlandscape/Header_01.jpg" class="mainImg" alt="BDF Energy in the room" />
</picture>
</figure>
<article class="teaser right square">
<figure class="js-animate award">
<picture>
<source srcset="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/Eagle-Adventure-Tours/_homeprojectlandscape/Header_141001.jpg" media="(max-width: 1000px)">
<img src="http://s3-eu-west-1.amazonaws.com/demodernsite/amazon/Cases/Eagle-Adventure-Tours/_homeprojectsquare/EAT_Teaser_1308x1308.jpg" class="mainImg" alt="Eagle Adventure Tours USA Trips for Bikers" />
</picture>
</figure>
<div class="teaser-details js-animate">
<h3>titoletto</h3>
<h5>Titolo</h5>
<div class="container">
<div class="desc"><p>
<p>Lorem ipsum dolor sit met et ce que si no forse.</p></p></div>
</div>
<div clas="readmore"></div>
Prima verifica che funzioni l'inserimento degli elementi, poi puoi pensare a estrarre i dati dal database.
L'errore dovrebbe essere dove definisci la costante UPLOAD_DIR, perché utilizzi le virgolette "intelligenti" e non quelle che sono indifferenziate tra apertura e chiusura.
Adesso la pagina si apre, ma i dati sembra che non vengano salvati (ho cercato sia tramite adminer che sul ftp per vedere se trovavo la cartella upload o eventuali immagini, ma nada).
Ciao Mattia,
pur creando la cartella non mi viene caricata l'immagine dentro. Quando inserisco dati e immagine e clicco su "crea Screen" non mi spunta nessun messaggio e non vedo neanche il minimo caricamento dalla barra...
Se cliccando sul bottone continua a non inviare il form (inviare è una cosa, salvare i dati è un'altra), dovresti verificare la correttezza del codice HTML. Puoi utilizzare il validatore ufficiale del W3C.
