Crearea unui wall Tag Tag cu Twilio Picture Messaging și PHP

Twilio a anunțat recent Picture Messaging a deschis foarte mult ceea ce putem face cu mesageria text, acum putem atașa fotografii la mesajele noastre text și le putem folosi în moduri diferite.

În cazul nostru, vom construi un Wall Tag Tag, care va conține fotografii legate de etichete care vor fi afișate pe un site web.

Acest lucru poate fi util pentru evenimente sau petreceri sau pentru orice lucru în care doriți să asociați fotografii și etichete.

Pentru a procesa fotografiile noastre, vom face câteva lucruri diferite; Le vom stoca local și apoi le redimensionăm pentru a afișa pe ecranele noastre mai frumoase.

Vom folosi Jolt Microframework pentru PHP, Idiorm și Paris pentru manipularea MySql.

Noțiuni de bază

Bine, în primul rând să înființăm baza noastră de date:

 CREATE TABLE "tag ('id' bigint (20) NOT NULL AUTO_INCREMENT, 'nume' varchar (255) NOT NULL DEFAULT", 'slug' varchar (255) NOT NULL DEFAULT ", KEY PRIMARY "nume" ("nume"), KEY "slug" ("slug")) ENGINE = MyISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = latin1; CREATE TABLE 'photo' ('id' bigint (20) NU NULL AUTO_INCREMENT, 'tag_id' bigint (20) NOT NULL DEFAULT 0, 'file' varchar 255 NOT NULL DEFAULT, NOTĂ NULL DEFAULT "," țara "varchar (255) NOT NULL DEFAULT", "datetime" timestamp DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY ('id'), KEY 'tag_id' )) ENGINE = MyISAM AUTO_INCREMENT = 1 DEFAULT CHARSET = latin1;

Aranjăm două mese, una pentru a stoca eticheta și una pentru fotografii și id-ul pentru eticheta la care sunt asociate.

Acest tabel stochează eticheta, imaginea și unele date meta despre numărul de telefon care a trimis fotografia.

De asemenea, vom avea nevoie să descărcați cadrele Jolt, Twilio PHP Library și Idiorm și Paris.

Primul lucru pe care veți dori să-l faceți este să apucați aceste pachete de pe site-urile lor respective:

Jolt (Release Stabil)
Paris și Idiorm
Biblioteca PHP Twilio

Acum că aveți toate pachetele descărcate pe computer, este timpul să vă configurați structura directorului. Vom plasa fișierele în dosarul rădăcină al site-ului nostru.

Introducem fișierele de servicii web din interiorul Servicii , deoarece ne ajută să ne uităm unde sunt lucrurile.

Ok, să ne aranjăm config.ini fișier, deschideți config.ini în editorul dvs. și modificați următoarele setări:

 setările site-ului site.name = site-ul meu site.url = http://mysiteurl.com; redarea vars views.root = vizualizări views.layout = layout; sesiune vars cookies.secret = IeNj0yt0sQu33zeflUFfym0nk1e cookies.flash = _F; db stuff db.enabled = true db.host = HOSTUL MEU DATABASE db.name = NUMELE DATABASEI LUI db.user = UTILIZATOR DATABASE MY db.pass = DATABASE DATELE PASULUI MEU; twilio stuff twilio.accountsid = CONTUL MEA TWILIO SID twilio.authtoken = MY TWILIO AUTH TOKEN twilio.from = MY TWILIO DIN NUMBER

Puteți vedea ce va trebui să completați aici, numele site-ului dvs. și adresa URL, informațiile despre baza dvs. de date și informațiile dvs. Twilio.

Acum pentru codificare!

Pentru a începe, să ne pregătim modelele. Vom crea un fișier în interiorul sistem director numit models.php:

 HAS_MANY ( 'Photo');  clasa Photo extinde modelul public tag tag () return $ this-> belongs_to ('Tag'); ?>

Acesta este un model destul de bază, dar un lucru frumos despre asta este că folosim Parisul pentru a stabili o relație cu etichetă masa. De fapt, pentru că am creat anterior baza noastră de date pentru a avea o tag_id domeniu în fotografie tabel, acest model știe să asocieze toate fotografiile cu tag_id, Unde tag_id este numele tabelului și câmpul cheie primară din etichetă masa.

Același lucru este valabil și pentru Fotografie class, unde l-am setat ca aparținând unei etichete așa cum este specificată în etichetă() funcţie.

Acest lucru este util pentru construirea unui sistem rapid de model fără prea multă cheltuială.

De asemenea, dorim să ne creăm functions.php fișier, pe care îl vom păstra și în interiorul sistem pliant:

  functions.php va conține două funcții de bază, o funcție, slugify (), va converti numele tagurilor în melci și cropResize () funcția va lua imaginea pe care o vom trece și o vom salva în noi dimensiuni.
 Vom folosi aceste funcții destul de mult.
 Cea mai mare parte a codului nostru va fi stocată în interior index.php, așa că să punem la cale oasele goale pentru asta:
   Ok, am inclus fișierele noastre și nu sa întâmplat nimic. Acum, hai să facem Jolt în picioare:
  $ app = nou Jolt (); Opțiunea $ app-> ("sursă", "config.ini");
 Codul de mai sus pune doar Jolt și îi spune să citească config.ini fișier și setați setările noastre de configurare, acum să ne conectăm la baza noastră de date:
  dacă opțiunea ($ app-> ('db.enabled')! = false) ORM :: configure ('mysql: host ='. $ app-> opțiune ('db.host'). $ app-> opțiune ( 'db.name')); ORM :: configure ('username', $ app-> opțiune ('db.user')); ORM :: configure ('parola', opțiunea $ app-> ('db.pass')); 
 Ultima noastră bucată de bootstrapping, dorim să înființăm clientul nostru Twilio:
  $ client = servicii noi_Twilio (opțiunea $ app-> ('twilio.accountsid'), opțiunea $ app-> ('twilio.authtoken')); $ fromNumber = $ app-> opțiune ("twilio.from"); $ App-> magazin ( 'client', $ client);
 Aceasta este secțiunea noastră de bootstrap, până acum tot ce am făcut este includerea fișierelor noastre, configurarea aplicației Jolt, conectarea la baza noastră de date și inițializarea clientului nostru Twilio.
 Chiar acum, dacă rulați aplicația dvs., veți primi câteva erori. În regulă, vom avea grijă de următoarele erori.
 
 Routing
 Acum trebuie să ne stabilim rutele și să spunem aplicației noastre ce trebuie să facă în baza anumitor reguli. Aceste reguli vor fi și ele obține sau post.
 Regulile noastre inițiale vor fi pagina de pornire, pagina de etichetare și ascultător:
  $ app-> get ('/', funcția () $ app = Jolt :: getInstance ();); $ app-> get ('/ tag /: tag', funcția ($ tag) $ app = Jolt :: getInstance ();); $ app-> post ('/ listener', funcție ($ tag) $ app = Jolt :: getInstance ();); $ App-> asculta ();
 Tocmai am creat acțiunile inițiale ale oaselor goale pentru pagina noastră de pornire, care este reprezentată de '/', pagina noastră de etichete și ascultător.
 Veți observa că ascultătorul este a post mai degrabă decât a obține, pentru că acesta este un handler de la Twilio când sunt primite mesaje noi.
 În cele din urmă, veți vedea $ App-> asculta (); apel de metodă. Acesta este cel mai important apel de metodă pe care îl avem, deoarece îi spune aplicației să înceapă să ruleze.
 
 Nu există nici un loc ca acasă
 Să stabilim pagina de pornire și să construim viziunea pe care o vom afișa pentru toată lumea.
 Înlocuiți ruta inițială inițială cu aceasta:
  $ app-> get ('/', function () $ app = Jolt :: getInstance (); $ tags = Model :: factory ('Tag') - $ images = Modelul :: fabrică ('Photo') -> count (); $ tagList = Model :: factory ('Tag') -> find_many;) else $ tags = 0; $ tag-ul = array (); $ app-> render ('home', array ('tags' => $ tags, 'tagList' => $ tagList,'inNumber '=> $ app-> de la '),' imagini '=> $ images)););
 De asemenea, veți observa că îi spunem să facă ceva numit "Acasă', în vizualizari dosar, există o home.php fișier, deschideți-l și editați-l după cum urmează:
  Text  o imagine cu numele unei etichete. Imaginea dvs. va fi afișată pe acea etichetă.
   Număr de etichete: 
 Număr de imagini: 
 
 
 
 Etichete
    /etichetă/slug?> ">nume?> 
  
 Acest fișier va lua variabilele pe care le trecem de la $ App-> render () funcționează și le folosești aici.
 Vom afișa un număr total de etichete, împreună cu imaginile totale și o listă de etichete pe care un vizitator poate face clic.
 Prezentarea actuală a paginii este controlată de un fișier numit layout.php. Să mergem mai departe și să actualizăm fișierul acum:
    <?=$pageTitle?>           „> Acasă
 
 Wall Photo
 
 
   
 
  
 Acest lucru este destul de goală HTML oase, dar acoperă ceea ce avem nevoie. Toate ieșirile sunt trimise la $ pageContent variabilă în layout.php.
 
 Mesaje imagine!
 Ok, acum să rezolvăm încărcarea reală a imaginilor de la Twilio.
 Conectați-vă la contul dvs. Twilio și indicați un număr de telefon la http: // MYSITEURL / ascultător pentru mesajele SMS, unde MYSITEURL este adresa unde ați încărcat aplicația.
 Vom înlocui traseul ascultătorului cu acesta:
  $ app-> post ('/ listener', function () $ app = Jolt :: getInstance (); if (isset ($ _ POST ['NumMedia']) && $ _POST ['NumMedia' / Let's să aflăm ce etichetă este pentru ... sau să creezi unul nou ... $ thetag = slugify ($ _POST ['Body']); $ tag = Model :: factory ('Tag') -> where_equal $ thetag) -> find_one (); if (isset ($ tag-> id) &&! empty ($ tag-> id)) $ tag_id = $ tag-> id; $ tag = Modelul :: fabrică ('Tag') -> create (); $ tag-> name = $ _POST ['Body']; $ tag-> slug = ($ i = 0; $ i ($ i = 0; $ i < $_POST['NumMedia']; $i++) if (strripos($_POST['MediaContentType'.$i], 'image') === False) continue;  $file = sha1($_POST['MediaUrl'.$i]).'.jpg'; file_put_contents('images/original/'.$file, file_get_contents($_POST['MediaUrl'.$i])); chmod ('images/original/'.$file, 01777); // Edit image $in = 'images/original/'.$file; $out = 'images/processed/'.$file; cropResize($in,$out,250); chmod ('images/processed/'.$file, 01777); // Remove Original Image unlink('images/original/'.$file); $photo              =   Model::factory('Photo')->crea(); $ photo-> tag_id = $ tag_id; $ photo-> file = $ file; $ photo-> de la = $ _POST ['De la']; $ photo-> țară = $ _POST ['FromCountry']; $ Foto-> Salvare ();  $ message = $ app-> store ('client') -> account-> messages-> sendMessage ($ app-> opțiune ('twilio.from' ], / / Text acest număr "Imagini adăugate la <".strtolower(trim($_POST['Body']))."> ($ _ POST ['Body']))); return true; else if (isset ()) $ _POST ['De la'])) $ message = $ app-> store ('client') -> account-> messages-> sendMessage ($ app-> optiunea (twilio.from) valabil Twilio number $ _POST ['Din'], // Textul acestui număr "Eroare MMS. Încercați să trimiteți din nou imaginea"); header ('HTTP / 1.1 400 Solicitare eronată', true, 400); );
 Nu există o viziune asociată cu această acțiune. Acum, să trecem peste ceea ce face.
 Acest lucru este chemat doar în timpul a post, de aici $ App-> post () afirmație.
 Atunci când este activată de cineva care trimite un mesaj, verificăm dacă există imagini atașate și dacă există, atunci le vom circula și le vom salva în baza de date.
 În primul rând, verificăm dacă există etichete deja stocate în baza noastră de date care se potrivesc cu tag-ul pe care l-am atașat imaginii noastre și, dacă există, atunci apucăm id din baza de date, în caz contrar, salvăm o nouă înregistrare care conține informațiile respectivei etichete.
 Apoi, navigăm prin fișierele încărcate și ne asigurăm că acestea sunt imagini. Fiecare imagine este descărcată local și stocată în interiorul imagini / originale pliant. Apoi redimensionăm și decupăm imaginile pentru a fi o dimensiune mai ușor de gestionat și stocăm fișierele noi în interiorul imagini / prelucrate pliant.
 În cele din urmă, stocăm imaginile din interiorul bazei de date, împreună cu unele date meta despre apelul propriu-zis și trimitem un mesaj text către expeditor pentru a-i spune să examineze pagina de etichete.
 Dacă nu s-au atașat imagini, atunci le trimitem un mesaj că a apărut o eroare.
 
 Zidul foto
 Acum, am creat pagina de pornire și am creat ascultătorul. Ceea ce a mai rămas este de a crea peretele de fotografie în sine.
 Acest lucru va intra în interiorul $ App-> get ( '/ tag /: etichetă') apel.
 Înlocuiți substituentul original cu următorul cod:
  // preîncărcați fotografii ori de câte ori un traseu de potrivire are: tag în el $ app-> filter ('tag_slug', funcția ($ tag_slug) $ app = Jolt :: getInstance (); $ tag = ) -> unde_equal ('slug', $ tag_slug) -> find_one (); $ photos = $ tag-> photos -> magazin ('fotografii', $ fotografii);); $ app-> get ('/ tag /: tag_slug', functie ($ tag_slug) $ app = Jolt :: getInstance (); $ tag = $ app-> store (' > magazin ("fotografii"); $ app-> render ("galerie", array ("pageTitle" => "vizionarea fotografiilor pentru $ tag-> name > $ photos)););
 Observați $ App-> filtru (), Aceasta este o metodă la îndemână pe care o putem configura, care va apuca eticheta și fotografiile de fiecare dată $ tag_slug variabila este trecută, aceasta ne permite să salvăm întrebări suplimentare.
 Acum, trebuie să înființem o gallery.php în interiorul paginii vizualizari:
   #Nume; ?>
 
 
     fișier)) ?>   / Images / prelucrate /fișier?> "title ="datetime?> ">  datetime?>
 
 
   
 
 
  
 Aceasta va afișa galeria și va folosi zidăria jQuery pentru a umple frumos toate imaginile.
 
 In concluzie
 Așa că completează aplicația noastră. Ați construit acum un mic zid de fotografie care poate fi folosit pentru a afișa fotografii din evenimente. Asigurați-vă că verificați link-urile furnizate mai sus pentru a afla mai multe despre bibliotecile și cadrele utilizate în acest articol. Vă mulțumim pentru lectură.



		
			
	   
	




Cod