Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Paano Gumawa ng isang simpleng Chat na application na naka base sa web

by
Difficulty:BeginnerLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Sa tutorial na ito ay gagawa tayo ng isang simpleng chat application gamit ang PHP at jQuery. Itong mga ganitong klase ay sadyang sakto para sa live na systema ng supporta ng inyong website.


Panimula

final product

Ang chat application na ating bubuoin ngayon ay simple lang. Ito ay magkakaroon ng login at logout na systema, AJAX na estilo ang katangian, at mgbibigay din tyo ng supporta para sa mga taong madamihan ang account na gamit.


Hakbang 1 : HTML Markup

Sisimulan natin ang tutorial sa paggawa ng unang file na tatawagin nating index.php.

  • Ang ating html ay sisimulan ng kalimitang DOCTYPE, html, head, at body tags.  Sa bahagi ng ulo, ilalagay natin ang pamagat, at pangkabit papunta sa ating css stylesheet (style.css)
  • Sa loob ng ating katawan, bubuoin ang ating plano ng pgkakaayos sa loob ng #wrapper div. Magkakaroon tayo ng tatlong pangunahing mga bloke: ang simpleng menu, an gating chatbox, at ang ating input na mensahe; kasama ng kanilang div at id. Magkakaroon tayo ng tatlong pangunahing mga bloke: ang simpleng Menu, an gating chatbox, at ang ating input na mensahe; kasama ng kanilang div at id.
    • Ang #menu div ay bubuoin ng dalawang elemento ng talunton. Ang una ay ang magandang pagtanggap sa gumagamit at ito ay lumulutang sa kaliwa at ang pangalawa ay ang pangkabit sa pglabas na ilalagay natin na nakalutang sa kanan. Lalagyan din natin ng div para mabura ang mga element.
    • Ang #chatbox div ang lalagyan ng ating chatlog. Ating ipapasok ang log galling sa file na galling sa external gamit ang request na ajax ng jQuery.
    • Ang pinakahuli sa ating #wrapper div ay ang ating form, na meron kasama na text input para sa mensahe at ang pindutan para isubmit.
  • Ating idadagdag an gating scripts sa huli para mas mabilis ang pagbukas ng ating pahina. Atin munang ikakabit sa Google jQuery CDN, dahil gagamitin natin ang jQuery library para sa tutorial na ito. Ang pangalawang script tag ay kung saan tayo maggagawa. Ipapasok natin ang lahat ng ating code kapag handa na an gating dokumento.

Hakbang  2 : CSS Styling

Magdadagdag tayo ngayon ng ilang CSS upang gawing mas maganda ng hitsura ng ating application ng chat kesa sa default na estilo ng browser. Ang code sa ibaba ay idadagdag  sa ating style.css file.

Walang espesyal sa CSS  na nasa itaas kundi sa ang ilang mga ID at mga klase, kung saan gagamitin ang estilo, ay idadagdag mamaya.

Tulad ng makikita sa itaas, tapos na tayo gawin ang ating interface ng gagamit ng chat.

Hakbang 3: Ang Paggamit ng PHP upang lumikha ng isang form na pang log-in.

Ngayon gagawin natin ang isang simpleng form na hihiling sa pangalan ng user bago ito makapgpatuloy.

Ang ginawa nating login Form() ay meron isang simpleng login form na mgtatanong ng kanyang pangalan. Gagamit tayo ng if at else na statement para mapatunayan na ngpasok talaga ng pangalan ang gagamit. Kung nagpasok talaga ng pangalan, i-set natin ang pangalan na $_SESSION['name']. Dahil gumagamit tayo ng cookie-based na sesyon para itago ang ating pangalan, dapat natin tawagin session_start() bago ang lahat ay mailagay na sa browser.

Ang isang bagay na dapat bgyan mo ng atensyon ay, ang ating paggamit ng htmlspecialchars() panggawa, na siyang napbabago ng mga espesyal na karakter at ginagawang HTML na mga bagay, kaya nabibigyan ng protection ang variable na pangalan na maging biktima ng Cross-site scripting (XSS). Mamaya ay idadagdag din natin ang tungkulin para sa nagbabagong text na ilalagay sa chat log.

Ipakita ang Form na pang Login

Para mapakita ng form para mag login kung sakaling ang gumagamit ay hindi pa nakakapasok, at ito ay hindi pa nakakapagsimula gumawa ng sesyon, tayo ay gagamit ng isa pang if at else na pahayag sa palibot ng #wrapper div at script tags sa ating orihinal na code. Sa kabilang banda, itatago nito ang form na pang login, at ipapakita ang chat box kung ang gumagamit ay nakapasok at nakagawa na ng sesyon;

Pagsalubong papasok at Logout na Menu

Hindi pa tayo tapos gumawa ng systema para sa login para ating application pang chat. Kailangan pa natin payagan ang gumagamit na mglog out, at tapusin ang sesyon ng chat. Kung maalala mo, ang ating orihinal HTML na idinagdag ay may kasamang simpleng menu. Bumalik tyo at magdagdag ng ibang code pang PHP na magbibigay ng masmadaming katungkulan ng menu.

Una sa lahat, ating isama ang pangalan ng gumagamit sa ating mensahe sa welcome. Magagawa natin ito sa pagoutput ng sesyon ng pangalan ng gagamit.

Para mapayagan ang user na mag logout at tapusin ang sesyon, pangunahan natin an gating sarili at bahagyang gamitin ang jQuery.

Ang jQuery na nasa itaas ay ngpapakita ng kumpirmasyon na alerto kung ang isang user ay ngpindot ng #exit link. Kung ang user ay magkumpirma na siya ay lalabas na, samakatuwid ay naisipan nang tapusin ang sesyon, tsaka natin siya ipapadala sa index.php?logout=true. Ito ay gumagawa ng variable na tinatawag na logout na merong halaga na totoo. Kailangan natin mahuli ang variable na ito gamit ang PHP:

Ngayon makikita natin kung ang variable na “logout” ay umiiral gamit ang isset() na tungkulin. Kung ang variable ay naipasa gamit ang url, gaya ng nabanggit na pang ugnay sa itaas, ito ay maari na natin tapusin ang sesyon ng pangalan ng user.

Bago sirain ang pangalan ng user ng sesyon gamit ang session_destroyer() na tungkulin, gusto natin mgiwan ng simplang mensahe bago lumabas ng chat log. Ang sasabihin nito ay ang user ay nakaalis na sa sesyon ng chat. Gagawin natin ito sa paggamit ng fopen(), fwrite(), and fclose() na tungkulin para imanipula an gating log.html file, na siyang makikita natin mamaya, ay siyang mabubuo na ating chat log. Pakatandaan na tayo ay nagdagdag ng klase na ‘msgln’ sa div. Tapos na natin tukuyin ang css styling para sa div na ito.

Pagkatapos gawin ito, sisirain natin ang sesyon, at idederecta ang user sa parehong pahina kung saan makikita ang login form.


Hakbang 4: Pag asikaso ng Input ng User

Pagkatapos mgsubmit ng form ang user, gusto natin kuhain ang kanyang naiisip at ilagay ito sa ating chat log. Para magawa natin ito, kailangan natin gumamit ng jQuery at PHP para sabay na mgtrabaho sa banda ng cliente at server.

jQuery

Halos lahat ng gagawin natin gamit ang jQuery para mahawakan an gating data, ay iikot lamang sa hiling na jQuest.

  1. Bago tayo mgsimula, kailangan makuha natin ang nasa isip ng user, o kung ano man na nakalagay sa kanyang #submitmsg na input. Maari itong makuha sa paggamit ng val() na katungkulan, na nakakakuha ng set na halaga sa lugar na form. Itong halaga naman ay itatago natin na clientmsg na variable.
  2. Eton a ang pinakaimportanteng parte: Ang Post na hiling na jQuery. Ito ay mgpapadala ng hiling na POST sa post.php file na ating gagawin sa susunod na sandal. Ito ay magtatala ng input ng cliente, o kung ano man na naka adja sa clientmsg na variable.
  3. Sa huli, lilinisin natin ang #usermsg na input sa pagset ng halaga nito sa blanko.

Pakitandaan na ang code sa itaas ay mapupunta sa ating script tag, kung saan natin inilagay ang jQuery code na pang logout.

PHP - post.php

Ngayon ay meron tayong POST na data na ipinapadala sa post.php na file sa tuwing mgpapasa ang user ng form, at mgpadala ng bagong mensahe. Ang ating layunin ngayon ay makuha ang data, at isulat ito sa ating chat log.

  1. Bago tayo gumawa ng kahit ano, kailangan natin simulant ang post.php na file gamit ang session_start() na katungkulan dahil gagamitin natin ang sesyon ng pangalan ng user na nakatago sa atin.
  2. Using the isset Boolean, titignan natin kung ang pangalan para sa sesyon ay nagamit nab ago tayo gumawa ng kahit ano.
  3. Ngayon naman kukuhain natin ang data na POST na ipinapadala sa file na ito ng jQuery. Itatago natin ang data sa $text variable.
  4. Itong data, kagaya ng lahat ng mga input data ng mga user, ay ilalagay natin sa log.html.file. Para magawa natin ito mgbubukas tyo ng file habang nasa mode na fopen function papunta sa ‘a’, na ayon sa php.net ay ngbubukas ng file para lamang mgsulat, ilalagay ang file pointer sa dulo ng file. Kung ang file ay wala, subukan gumawa nito. Ngayon ay isusulat na natin ang ating mensahe sa file gamit ang fwrite() function.
    • Ang mensahe na ating isususlat ay nakalagay sa loob ng .msgln div. Ito ay mglalaman ng petsa at oras nagawa gamit ang date() function, ang sesyon ng pangalan ng user, at text, na mapapalibutan din ng htmlspecialchars() na function para maiwasan ang XSS.

    Panghuli, ating isasarado an gating file gamit ang fclose().


Hakbang 5:  Ang Pagdisplay ng nilalaman ng Chat Log (log.html) Mga Nilalaman

Ang lahat ng pinost ng user ay inaayos at ipinapadala gamit ang jQuery; ito ay nakasulat sa chat log gamit ang PHP. Ang kailangan nalang gawin ay mgdisplay ng pinakabagong chat log para sa user.

Para makatipid tayo ng oras, gagawin natin naka preload ang chat log papunta sa #chatbox div kung meron itong nilalaman.

Gagamit tyo ng kagayang Gawain na parang ginamit natin ang post.php file, ang pinagkaiba lang ngayon ay binabasa natin at inoutput ang nilalaman ng file.

Ang paghiling ng jQuery.ajax

Ang ajax na hiling ay ang pinakasentro ng lahat ng gagawin natin. Ang hiling ay hindi lamang tyo pinapayagan magpadala at tumanggap ng data gamit ang form na hindi na kailangan i-load muli ang pahina, ito din ay pinapayagan tayo na tanggapin ang hininging data.

Ibabalot natin an gating hininging ajax sa loob ng katungkulan. Makikita mo kung bakit sa ilang Segundo. Makikita sa itaas na tayo ay gagamit lang ng tatlong hiling na gamit para sa ajax ng jQuery.

  • url: Isang mahabang URL para irequest. Gagamitin natin an gating chat logs filename para sa log.html. Gagamitin natin an gating chat logs filename para sa log.html.
  • cache: Ito ay para maiwasan an gating file ay mailagay sa cached. Ito ay mgsisigurado na makakuha tyo ng bagong chat log sa tuwing mgpapadala tyo ng request.
  • sucess: Ito ang mgbibigay daan para maikabit ang katungkulan na siyang magdadala ng data na hiningi.

Makikita mo, na gagalawin din natin an gating hininging data (html) papunta sa #chatbox div.

Auto-scrolling

Malamang ay nakita mon a sa ibang application para sa chat, ang laman ay kusa na lumalabas pababa galing sa lalagyan ng (#chatbox) kung ito ay umapaw na. Ipapatupad natin ang isang simple at kahawig na feature, na maaring ikumpara ang taas ng lalagyan bago at pagkatapos malagyan ng ajax request. Kung mas mataas ang scroll kesa sa request, gagamit tyo ng epekto na animate para sa jQuery para maibaba ang #chatbox div.

  • Ilalagay muna natin ang taas ng #chatbox div sa oldscrillHeight na variable bago tayo gagawa ng request.
  • Kapag matagumpay ng bumalik ang ating request, ilalagay na natin ang taas ng #chatbox div’s scrolle sa newscrollHeight na variable.
  • Ngayon ikukumpara natin parehong variable ng taas ng scroll gamit ang an if na statement. Kung ang newscrollHeight ay mas mataas kesa sa oldscrollHeight, gagamitin natin ang epektong animate para maiscroll ang #chatbox div.

Patuloy na Pagaayos ng Chat Log

Ngayon meron isang tanong ang maaring itanong, paano natin walang tigil na babantayan ang mga bagong data na pinapadala ng mga users pabalik balik? O sa madaling salita, paano natin magagawang mgpadala ng request na iupdate ang data ng walang tigil?

Ang sagot sa iyong tanong ay nakalaan sa setinterval function. Itong katungkulan ang magpapatakbo ng ating Loadlog() kada 2.5 na Segundo, at ang loadlog na katungkulan ang mgrerequest ng pinakabagong file at autoscroll ng div.

Tapos

Tayo ay tapos na! Sana ay natutunan mo kung paano gumagana ang pangunahing systema ng chat, at kung meron kang suhestion o kahit ano mun, masaya go itong tatanggapin. Itong systema ng chat ay ang pinaka simple na maari mo Makita para sa application. Maari mong gamitin ito at gumawa ng madamihang kwarto pang chat, magdagdag ng administrative backend, mgdagdag ng emoticons, atbp. Ang langit ang iyong limit.

Sa ibaba ay meron ilang mga halimbawa na pwede mo tignan kung iniisip mon a palakihin pa ang application ng chat na ito.

  • Sundan kami sa Twitter, o mgsubscribe sa the NETTUTS RSS Feed para sa pang araw araw na bago tungkol sa web development tutorial man o artikulo.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.