Creare la scheda di messaggi tipo Facebook

A molti utenti piace Facebook. Si può chiacchierare con gli amici, familiari e colleghi, incontrare nuove persone, condividere foto e altri link. Una delle proprietà notevoli del panello di messaggi di Facebook è un contenuto dell'allegato incorporato. Esso consente di sfogliare il contenuto di altri siti, senza dover andare da loro. E 'probabile che Facebook utilizza o Embed con un sacco di modifiche per se. In questa lezione vedremo come creare incorporazione dell'allegato interna, simile a quello che usa Facebook utilizzando jQuery oEmbed e AJAX.

 

 

Che cosa è jQuery oEmbed? OEmbed - è un formato aperto che permette di collegare il contenuto di siti esterni. È possibile allegare foto, video, documenti, filmati flash, o qualsiasi altro contenuto multimediale (da alcuni siti). oEmbed è supportato da molti siti popolari - Flickr, YouTube, Vimeo e molti altri. jQuery oEmbed - è un plugin che utilizza l'API oEmbed per fissare il contenuto. E 'molto piccolo (versione ridotta a icona è di circa 4 KB) e, come la maggior parte plugins jQuery, facile da usare. Sintassi ::

<script type='text/javascript'>
// Collegiamo jQuery e jQuery.oembed a questo punto del codice
$(function(){
 $("a.embed").oembed();
});
</script>
<!-- HTML -->
<a href='<a href="http://www.youtube.com/watch?v=8JRICTFnViM"><a href="http://www.youtube.com/watch?v=8JRICTFnViM</a>'>">http://www.youtube.com/watch?v=8JRICTFnViM</a>'></a>lezione PHP su YouTube</a>

jQuery.oEmbed crea un div con la classe "oEmbed-contenitore" e attribuisce il contenuto ad esso.
Algoritmo di applicazioni
La nostra applicazione è molto semplice - si inserisce il messaggio utente e converte i link in content interno.
Creare un layout

La nostra struttura è molto semplice, in quanto l'applicazione stessa

Aggiungiamo seguente codice nel file index.php.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aggiornamento di stato tipo  Facebook utilizzando  jQueryoEmbed</title>
</head>
<body>
<div id='wrapper'>
<divid='updateBox'>

Digitate il vostro messagio qua...

<textarea id='statusMsg'></textarea>
<button id='shareBtn'>Ввод</button>
   (Никакого HTML, только ссылки и текст)
<div class='clear'></div>
</div>
<div id='msgs'>
</div>
</div>
</body>
</html>

Stiamo creando un guscio dove posicionjamo gli elementi. Ogni messaggio viene inserito in un div con la classe "msg".
CSS Nei CSS, posiamo creare colore e modello, simile a Facebook. È possibile specificare qualsiasi stile, che ci piace.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
body {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 14px;
line-height:1.3em;
text-align:center;
}
a, a:visited {
outline:none;
}
.clear {
clear:both;
}
img {
 border:0;
}
#wrapper {
width:480px;
margin:0 auto;
text-align:left;
}
#updateBox {
 background-color:#F2F2F2;
 border:1px solid #B5B5B5;
 padding:4px;
}
#statusMsg {
 width:100%;
 height:70px;
 border-color:#7C7C7C #C3C3C3 #DDDDDD;
 border-style:solid;
 border-width:1px;
}
#shareBtn {
 background:#5872A7;
 float:right;
 color:#ffffff;
 font-weight:bold;
 border:0;
 padding:4px;
 margin-top:2px;
}
#msgs {
}
.msg {
 margin-top:8px;
 border-bottom:1px solid #B5B5B5;
 padding-bottom:4px;
 color:#808080;
 font-size:13px;
}
.msg a {
 color:#3B5998;
 text-decoration:none;
}
.msg a:hover {
 text-decoration:underline;
}
.oembed-container {
 border-left:2px solid #eaeaea;
 margin-left:15px;
 padding:4px 4px 4px 10px;
}

In CSS non c'è nulla che avrebbe bisogno di essere spiegato. Oltre alla classe "oEmbed-contenitore". jQuery.oEmbed per impostazione predefinita, crea un div con la classe "oEmbed-contenitore". Creiamo un stile per evidenziare il contenuto collegato.

Tabella di database Abbiamo bisogno di una tabella per memorizzare i messaggi di stato. Esso utilizza una tabella molto semplice con due campi - id econtent. Campo id- ha un tipo ed è l'identificatore del messaggio di stato. Dopo content- messaggi di testo. Per creare una tabella, utilizzare la richiesta SQL:

CREATE TABLE `status_msgs` (
 `id` int(11) NOT NULL auto_increment,
 `content` text,
 PRIMARY KEY (`id`)
);

Notate che il formato della tabella è molto semplice. La maggior parte delle applicazioni di queste tabelle utilizzanno i campi aggiuntivi per identificare il messaggio dell'autore. Ma per questa lezione, la struttura della tabella è semplificata.

Connessione al database Creiamo un nuovo file e salviamolo come file config.php. Scriviamo il seguente codice in esso.

 

<?php
         $host = "HOST"; //Nome del vostro server database. nei magior dei casi e  "localhost"
            $username = "USERNAME"; //nome del utente

            $password = "PASSWORD"; // pasvord del utente

            $db = "DB"; // nome tabella

            
            mysql_connect($host, $username, $password) or die("impossibile collegarsi alla  database.");
            mysql_select_db($db) or die("impossibile sceliere database");?>

E 'necessario apportare modifiche in base alle vostre impostazioni per la connessione al database

Creare la barra dei messaggi Quando la pagina viene caricata, al utente va dimostrato quello che ce gia sul pannelo di messaggi. Così, ci colleghiamo al database, si ottengono tutti i messaggi di stato e per ogni messagio viene creato div. Codice in seguito descrive questo passaggio. Si aggiunge alla pagina <div class='msg'> </ div>

<?php </i>
<i>   include("config.php");</i>
<i>   $q = "SELECT * FROM status_msgs ORDER BY id DESC";</i>
<i>   $r = mysql_query($q);</i>
<i>   if(mysql_num_rows($r) > 0) {</i>
<i>   //ci sono messagi
</i>
<i>   while($row = mysql_fetch_assoc($r)){</i>
<i>     echo "<div class='msg'>\n";</i>
<i>     echo $row['content']."\n";</i>
<i>     echo "</div>\n";</i>
<i>   }</i>
<i>   } else {</i>
<i>   //non ci sono messagi
</i>
<i>   echo "nella base non c'e niente!";</i>
<i>   }</i>
<i>?>

Aggiungiamo anche un paio di righe nel <head>  del file index.php per collegare oEmbed ai link nel panello del messaggio..

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script></i>
<i><script type='text/javascript' src='jquery.oembed.min.js'></script></i>
<i><script type='text/javascript'></i>
<i>$(function(){</i>
<i> $(".msg a").oembed(null, {</i>
<i> embedMethod: "append",</i>
<i> maxWidth: 480</i>
<i> });</i>
<i>});</i>
<i></script>

Metiamo jquery.oembed.min.js nella stessa directory del file index.php
Salviamo il messaggio di stato con AJAX E arrivato il tempo di aggiungere AJAX alla nostra piccola applicazione. Quando l'utente preme il tasto "Invio", vengono effetuati due passi prima di effettuare la richiesta utilizzando AJAX. Il primo - per rimuovere tutti i tag HTML dal messaggio di stato. In secondo luogo - la sostituzione di un URL per fare riferimento ai tag HTML. Dobiamo creare un novo fail functions.js e salviamo al interno del esso seguente codice:

function stripHTML(source){</i>
<i> var strippedText = source.replace(/<\/?[^>]+(>|$)/g, "");</i>
<i> return strippedText;</i>
<i>}</i>
 
<i>function replaceURLWithHTMLLinks(source) {</i>
<i> var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;</i>
<i>   replaced = source.replace(exp,"<a href='$1' target='_blank'>$1</a>"); </i>
<i>   return replaced;</i>
<i>}

 

La prima funzione rimuove tutti i tag HTML. E secondo funzione (fonte: StackOverflow) sostituisce tutte le URL con i tag HTML di riferimento (in funzione viene usata regular expression.) Fissiamo functions.js al file index.php con la riga nel <head> :

<script type='text/javascript' src='functions.js'></script></i>
Quindi aggiungere un paio di righe nel tag <head> del file index.php 
{codecitation class="brush: css; first-line: 1;"}<script type='text/javascript'>
$(function(){
 $("#shareBtn").click(function(){
 status_text = $("#statusMsg").val();
 if(status_text.length == 0) { //inserito niente

   return;
 } else {
   $("#statusMsg").attr("disabled", "disabled"); //disabilitiamo lo spazio per testo per iil periodo di  lovoro di ajax
   status_text = stripHTML(status_text); // canceliamo i tag html
   status_text = replaceURLWithHTMLLinks(status_text); // sostitiamo i colegamenti con tag HTML.
   $.ajax({ //faciamo una domanda ad ajax
   url: "ajaxUpdate.php",
   type: "POST",
   data: "status_msg="+status_text,
   success: function(msg) {
     $("#statusMsg").val(""); //ripugliamo lo spazio per inserimento del testo
     $("#statusMsg").attr("disabled", "");
     if(msg == "true") { //messagio posicionato con sucesso

     $("#msgs").prepend("<div class='msg'>"+status_text+"</div>"); //aggingiamo messagio al panello dei messaggi 

     $(".msg:first a").oembed(null, {maxWidth: 480, embedMethod: "append"}); //ссылки oEmbed для сообщений
     } else { //errore
     alert("Нельзя разместить сообщение в данный момент! Пожалуйста, попробуйте позже.");
     }
   }
   });
   return false;
 }
 });
});
</script>

Il codice qui sopra inizia a funzionare quando l'utente preme il tasto "Invio". Se è stato immesso nessun testo, non accade nulla. Se è stato inserito il testo, viene aplicata funzione JavaScript per rimuovere i tag HTML e convertire Link URL in tag HTML di collegamento. Dopo la formazione del testo viene fatta richiesta di AJAX ad ajaxUpdate.php (che creeremo in seguito.) Se la risposta è "true", allora il messaggio viene aggiunto al pannello di riferimento e il contenuto del messaggio viene convertito in un allegato. In caso contrario, l'utente riceve il messaggio che il messaggio non può essere accetato in questo momento. Nel file di ajaxUpdate.php dobiamo aggiungere il seguente codice:

<?php 
include("config.php");
if(!$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
 {
 die("Доступ к файлу запрещен! Файл занят!");
 }
if(!empty($_POST['status_msg'])){
 $q = "INSERT INTO status_msgs (content) VALUES ('{$_POST['status_msg']}')";
 $r = mysql_query($q);
 if(mysql_affected_rows() == 1) {
 echo "true";
 } else {
 echo "false";
 }
}
?>

Prima si fa verifica che la pagina è disponibile solo tramite AJAX. Dopo si controlla la presenza del testo nel messaggio. Se non è vuota, viene inserirto in una tabella e ritorna "true". In tutti gli altri casi, si restituisce "false".

Conclusione oEmbed ha anche una libreria di PHP. Se avete bisogno di ottenere un reale controllo della aplicazione, può essere utile a voi.

Fonte lezione: ad1987.blogspot.com/2010/04/howto-create-facebook-status-message.html

 

 

 

 

 

 

Letto 6772 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso