Realizacja funkcjonalności reakcji jak Facebook przy użyciu PHP, jQuery i HTML

Wprowadzenie

Reakcje są bardziej wyraziste w porównaniu do prostych przycisków podobnych i nielicznych. Używając reakcji użytkownik może łatwo wyrazić swoją myśl, ponieważ emotikony są w zasadzie sposobem na pokazanie emocji. Z drugiej strony, jeśli użyjemy przycisku "podoba mi się" i "nie podoba mi się", to użytkownik nie będzie mógł pokazać dokładnie emocji. Używając emotikonów możemy uczynić naszą witrynę bardziej ekspresywną dla użytkownika.

Cele bloga

Na tym blogu znajdziesz łatwy i szybki sposób implementacji funkcji Reakcje. Po przejściu przez blog, będziesz mógł stworzyć system reakcji na swoją stronę, podobnie jak przycisk Lubię to na Facebooku.

Emoji na Facebooku i polubienia

Pracujący

Będzie jeden przycisk Like i pozostałe przyciski reakcji. Po ustawieniu ostrości na przycisku Lubię, wyświetlone zostaną przyciski reakcji. JQuery będzie używany do obsługi kliknięć przycisków reakcji. Po naciśnięciu przycisku reakcji, żądanie Ajax jest wysyłane na stronie like.php. Logika do zapisywania / aktualizacji danych w bazie danych może być zapisana na stronie handler'a. Po ponownym dotknięciu tekstu reakcji reakcja zostaje przerwana i tym razem wysyłamy Ajax na stronę undo_like.php. Cała funkcjonalność pokazywania / ukrywania przycisków reakcji i animacji jest dodawana przez JavaScript i CSS.

Tworzenie struktury HTML

Zanim zaczniemy pracę nad logiką, będziemy musieli stworzyć układ. HTML dla układu jest następujący –

<! DOCTYPE html> <html> <head> <title> Facebook Reactions </ title> <meta name = "description" content = "Facebook Like Reaction System" /> <! - bootstrap css -> <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel = "stylesheet" type = "text / css" href = " css / style.css "/> <! - Css dla systemu reakcji -> <link rel =" stylesheet "type =" text / css "href =" css / reaction.css "/> <script type =" text / javascript "src =" js / jquery.min.js "> </ script> <! - jQuery for Reaction system -> <script type =" text / javascript "src =" js / reaction.js "> < / script> </ head> <body> <div class = "container"> <div class = "header"> <h1> Facebook Reactions </ h1> </ div> <div class = "main"> <! - - Start systemu reakcji -> <div class = "container-response"> <! - div kontenera dla systemu reakcji -> <span class = "reaction-btn"> <! - Domyślnie jak przycisk -> < span class = "response-btn-emo like-btn-default"> </ span> <! - Domyślnie jak emocja przycisku -> <span class = "reaction-btn-text"> Like </ span> <! - Domyślnie jak tekst przycisku, (Lubię, wow, smutek ..) default: Like -> <ul class = "emojies-box"> <! - Przycisk Reaction buttons -> <li class = "emoji emo-like" data-response = "Lubię to"> </ li> <li class = "emoji emo-love" data-response = "Love"> </ li> <li class = "emoji emo-haha" data-reaction = "HaHa"> </ li> <li class = "emoji emo-wow" data-response = "Wow"> </ li> <li class = "emoji emo-sad" data-reakcji = "Smutek "> </ li> <li class =" emoji emo-angry "data-response =" Angry "> </ li> </ ul> </ span> <div class =" like-stat "> <! - Podobnie jak kontener statystyczny -> <span class = "like-emo"> <! - jak kontener emocji -> <span class = "like-btn-like"> </ span> <! - dane emocje, takie jak, wow, sad (domyślnie: Like) -> </ span> <span class = "like-details"> Knowband i inne 10k </ span> </ div> </ div> <! - Reaction system end - > </ div> </ div> </ body> </ html>

Dodawanie stylu

Używamy dwóch plików CSS (style.css i reaction.css), aby dodać styl na stronie.

Uwaga: Możesz znaleźć pliki CSS w pełnej wersji projektu.

Dodawanie funkcjonalności

Gdy nasz układ jest gotowy, możemy pracować nad funkcjonalnościami. Najpierw będziemy obsługiwać krany na przyciskach Like i Reaction. W tym celu użyjemy jQuery, a my dodamy zdarzenia kliknięcia. Kod do dodania zdarzeń kliknięcia znajduje się poniżej –

// Dodawanie zdarzenia kliknięcia zaraz po przygotowaniu dokumentu $ (document) .ready (function () {// Dodawanie zdarzenia kliknięcia przycisku reakcji za pomocą nazwy klasy $ (". Emoji"). ", function () {// like click // Tutaj będziemy pisać kod, który będzie działał po dotknięciu przycisku reakcji});));

Na ognisku przycisku reakcji wysyłamy żądanie Ajax na stronie php. Prośba o Ajax jest podana poniżej –

// Wysyłanie żądania Ajax na stronie modułu obsługi (jak.php) w ​​celu wykonania operacji bazy danych $ .ajax ({typ: "POST", adres URL: "php / like.php", dane: "", sukces: funkcja (odpowiedź) {// Ten kod działa po pomyślnym Ajaxie}})

Następnie musimy utworzyć stronę obsługi. Może to być prosty plik php.

Uwaga: Użytkownik może dokonywać zmian w bazie danych w pliku obsługi zgodnie z wymaganiami. Cokolwiek jest zwracane / drukowane w tym pliku, jest zwracane do żądania Ajax i możemy odpowiednio zaktualizować układ. Tutaj dodaliśmy kod, aby zaktualizować układ, aby pokazać aktualnie zapisaną reakcję. Pełny kod pliku response.js jest następujący:

$ (document) .ready (function () {$ (". emoji"). on ("click", function () {// Tutaj otrzymujemy reakcję, która jest wywoływana przy użyciu atrybutu data-response zdefiniowanego w main strona var data_reaction = $ (this) .attr ("data-reaction"); // Wysyłanie żądania Ajax na stronie handler'a w celu wykonania operacji bazy danych $ .ajax ({type: "POST", url: "php / like.php ", data:" data_reaction = "+ data_reaction, success: function (response) {// Ten kod zostanie uruchomiony po pomyślnym Ajaxie (". like-details "). html (" Ty, Knowband i inne 10K ") ; $ (".reak-btn-emo"). removeClass (). addClass ("response-btn-emo"). addClass ("like-btn-" + data_reaction.toLowerCase ()); $ (". reakcji- btn-text ") text (data_reaction) .removeClass (). addClass (" response-btn-text "). addClass (" reakcja-btn-text- "+ data_reaction.toLowerCase ()). addClass (" aktywny ") ; if (data_reaction == "Like") $ (". like-emo"). html ('<span class = "like-btn-like"> </ span>'); else $ (". like-emo ") .html ('<span class =" like-btn-like "> </ span> <span class =" like-btn-' + data _reaction.toLowerCase () + '"> </ span>'); }})}); $ ("response-btn-text"). on ("click", function () {// cofnij jak kliknięcie if ($ (this) .hasClass ("active")) {// Wysyłanie żądania Ajax na stronie handler'a aby wykonać operacje na bazie danych $ .ajax ({type: "POST", url: "php / undo_like.php", dane: "", success: function (response) {// Handle when Ajax udaje się $ (". response-btn-text ") text (" Like "). removeClass (). addClass (" response-btn-text "); $ (" .reak-btn-emo "). removeClass (). addClass (" reakcja -btn-emo '). addClass ("like-btn-default"); $ (". like-emo"). html (' <span class = "like-btn-like"> </ span> '); $ (". like-details"). html ("Knowband i 1k inne");}})}})});

Podsumowanie

Możesz pobrać cały projekt z następującej lokalizacji –

Kliknij tutaj, aby pobrać cały projekt

W tym samouczku nie omówiliśmy połączenia z bazą danych i operacji, ponieważ logika bazy danych może być inna, zależnie od potrzeb. Za pomocą tego projektu możesz łatwo zaimplementować funkcjonalność reakcji taką samą jak Facebook na swojej stronie internetowej.


Shivika Tomar

Shivika Tomar

Shivika Tomar is a passionate PHP developer. Her area of interest is website development. She loves to bring healing to stressful and sad peoples.

Leave a Reply

Your email address will not be published. Required fields are marked *