Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Дуже простий вхід в систему за допомогою Perl, jQuery, Ajax, JSON і MySQL

  1. SQL
  2. HTML
  3. Посилання на CSS
  4. Посилання на JavaScript
  5. Форма входу в систему
  6. відображення результату
  7. Малюнок 2. Знімок екрана з повідомленням про помилку, повернутим JavaScript-кодом
  8. Перевірка коду
  9. JavaScript
  10. Лістинг 3. login.js
  11. Лістинг 4. login.pl
  12. Малюнок 5. Знімок екрану з JSON-рядком
  13. висновок
  14. Ресурси для скачування

З моменту появи всесвітньої павутини розробники намагаються оснастити свої Web-сайти новими функціональними можливостями і віджетами для залучення уваги користувачів і полегшення їхнього життя за допомогою впровадження новітніх технологій. Сьогодні звичайний Web-користувач крім усього іншого робить покупки, шукає інформацію, реєструється на форумах і в співтовариствах, грає в інтерактивні ігри та спілкується з іншими користувачами по мережі Інтернет. У більшості випадків користувач повинен зареєструватися на Web-сайті та увійти в свій обліковий запис. Ці базові функції вимагають особливої уваги - вони повинні бути простими, швидкими і безпечними для користувача. З точки зору розробника реалізація цих функцій спрощується з кожним днем, завдяки новим технологіям.

У статті розповідається, як реалізувати на вашому Web-сайті дуже просту функціональність входу в систему, об'єднавши кілька технологій.

Реалізація складається з 4 розділів.

  1. В розділі SQL описується, як створити в базі даних таблицю для зберігання інформації про користувачів.
  2. В розділі HTML реалізуються посилання на CSS і JavaScript, а також форма входу в систему.
  3. В розділі JavaScript реалізується Ajax-фрагмент, який використовує jQuery і JSON.
  4. Нарешті, в розділі Perl реалізується взаємодія між користувачем і базою даних.

В розділі інструкцій наведені покрокові інструкції по об'єднанню всіх розділів. Передбачається, що ви знайомі з перерахованими технологіями і маєте досвід розробки Web-додатків. Якщо у вас є достатній досвід використання перерахованих технологій, можете перейти безпосередньо до розділу інструкцій.

Що не включене до статті

Важливо відзначити, що безпека, наприклад, перевірка інформації, що вводиться користувачем, на можливі загрози для даних і системи, не є темою цієї статті. Тому ніякі методи шифрування для збереження призначених для користувача паролів не застосовуються. Однак настійно рекомендується досліджувати можливі уразливості системи і додати в свій код необхідну функціональність.

SQL

Оскільки дана методика входу в систему є дуже простий, таблиця users містить тільки три поля; унікальний ідентифікатор (id), унікальне ім'я користувача (username) і пароль (password).

CREATE TABLE '' .'users '(' id 'INT NOT NULL AUTO_INCREMENT,' username 'VARCHAR (45) NOT NULL,' password 'VARCHAR (45) NOT NULL, PRIMARY KEY (' id '), UNIQUE INDEX' id_UNIQUE ' ( 'id' ASC), UNIQUE INDEX 'username_UNIQUE' ( 'username' ASC)); COMMIT;

Реальну вставку даних і перевірку їх унікальності необхідно передбачити в функції реєстрації користувача, але це не є темою цієї статті. Ми припускаємо, що таблиця users вже заповнена відповідною інформацією про користувачів, яка буде потрібно для реалізації функціональності входу в систему.

Для тестування можете використовувати наступний код, вставляють дві прості записи в таблицю users:

INSERT INTO '' .'users '(' id ',' username ',' password ') VALUES (1,' username1 ',' password1 '); INSERT INTO '' .'users '(' id ',' username ',' password ') VALUES (2,' username2 ',' password2 '); COMMIT;

Якщо ви використовуєте НЕ MySQL, синтаксис SQL-вирази для вашої бази даних може трохи відрізнятися від наведеного вище.

HTML

HTML-файл містить форму входу в систему, а також посилання на файли CSS і JavaScript.

Посилання на CSS

Для простоти в статті основну увагу приділяється дизайну форми входу в систему, а реалізації згаданих вище технологій, тому в ній використовується вже доступний вихідний код з модифікованою ліцензією MIT під назвою Blueprint CSS Framework, що гарантує сумісність з різними браузерами. Природно, є і багато інших безкоштовних CSS-реалізацій для різних проектів в мережі Інтернет.
Посилання на додаткову інформацію про Blueprint CSS Framework наведені в розділі ресурси .

<Link rel = "stylesheet" type = "text / css" media = "screen, projection" href = "http://www.blueprintcss.org/blueprint/screen.css" /> <link rel = "stylesheet" type = "text / css" media = "screen, projection" href = "http://www.blueprintcss.org/blueprint/plugins/buttons/screen.css" /> <link rel = "stylesheet" type = "text / css "media =" print "href =" http://www.blueprintcss.org/blueprint/print.css "/> <! - [if IE]> <link rel =" stylesheet "type =" text / css "media =" screen, projection "href =" http://www.blueprintcss.org/blueprint/ie.css "> <! [endif] ->

Посилання на JavaScript

Крім бібліотеки jQuery, також використовується JavaScript-файл login.js, який буде розглянуто нижче.

<Script type = "text / javascript" src = "// code.jquery.com/jquery-1.4.4.min.js"> </ script> <script type = "text / javascript" src = "login.js "> </ script>

На момент публікації даної статті останньою версією jQuery була версія 1.4.4; для отримання найсвіжішої версії зверніться в розділ ресурси .

Форма входу в систему

Форма входу в систему складається з текстового поля username, поля password і кнопки submit.

<Form id = "loginForm" name = "loginForm" method = "post" action = ""> <fieldset> <legend> Enter information </ legend> <p> <label for = "username"> Username </ label> <br /> <input type = "text" id = "username" name = "username" class = "text" size = "20" /> </ p> <p> <label for = "password"> Password < / label> <br /> <input type = "password" id = "password" name = "password" class = "text" size = "20" /> </ p> <p> <button type = "submit" class = "button positive"> <img alt = "ok" src = "http://www.blueprintcss.org/blueprint/plugins/buttons/icons/tick.png" /> Login </ button> </ p> </ fieldset> </ form>

Для перевірки ініціатора введення інформації, тобто для визначення того, що введення даних виконаний людиною, а не комп'ютером, можна використовувати функцію Captcha.
В розділі ресурси наведені посилання на додаткову інформацію про Captcha.

відображення результату

Результат входу в систему буде відображатися в тезі div, який прихований під час завантаження і заповнюється пізніше JavaScript-кодом.

<Div id = "loginResult" style = "display: none;"> </ div>
Малюнок 2. Знімок екрана з повідомленням про помилку, повернутим JavaScript-кодом
Малюнок 3. Знімок екрана з повідомленням про помилку, повернутим Perl-кодом
Малюнок 4. Знімок екрану з повідомленням про успішну операцію, повернутим Perl-кодом
Лістинг 2. login.html
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <title> Very simple login using Perl, jQuery, Ajax, JSON and MySQL </ title> <link rel = "stylesheet" type = "text / css" media = "screen, projection" href = "http://www.blueprintcss.org/blueprint/screen .css "/> <link rel =" stylesheet "type =" text / css "media =" screen, projection "href =" http://www.blueprintcss.org/blueprint/plugins/buttons/screen.css "/ > <link rel = "stylesheet" type = "text / css" media = "print" href = "http://www.blueprintcss.org/blueprint/print.css" /> <! - [if IE]> <link rel = "stylesheet" type = "text / css" media = "screen, projection" href = "http://www.blueprintcss.org/blueprint/ie.css"> <! [endif] -> < script type = "text / javascript" src = "// code.jquery.com/jquery-1.4.4.min.js"> </ script> <script type = "text / javascript" src = "login.js" > </ script> <style type = "text / css" > #LoginContent {width: 350px; margin: 100px auto; } Button [type] {margin: 0.5em 0; } </ Style> </ head> <body> <div id = "loginContent" class = "container"> <div id = "loginResult" style = "display: none;"> </ div> <form id = " loginForm "name =" loginForm "method =" post "action =" "> <fieldset> <legend> Enter information </ legend> <p> <label for =" username "> Username </ label> <br /> < input type = "text" id = "username" name = "username" class = "text" size = "20" /> </ p> <p> <label for = "password"> Password </ label> <br /> <input type = "password" id = "password" name = "password" class = "text" size = "20" /> </ p> <p> <button type = "submit" class = "button positive "> <img alt =" ok "src =" http://www.blueprintcss.org/blueprint/plugins/buttons/icons/tick.png "/> Login </ button> </ p> </ fieldset> < / form> </ div> </ body> </ html>

Хоча CSS не є нашою головною турботою, в HTML-код додані два визначення inline, щоб зробити зовнішній вигляд форми і кнопку привабливішими.

Перевірка коду

HTML-код і додаткові CSS-визначення були перевірені на коректність за допомогою сервісів W3C Validation Services.
Посилання на додаткову інформацію про W3C Validation Services наведені в розділі ресурси .

JavaScript

Коли користувач підтверджує введені в формі входу дані, вони зчитуються бібліотекою jQuery. Після проходження дуже простий перевірки на відсутність незаповнених полів в Perl-сценарії ( login.pl ) Виконується Ajax-виклик. Ключовим дією Ajax-виклику є установка параметра dataType в json.

Залежно від результату виклику сценарію активізується або функція error, або функція success. У нашому прикладі коду обидві функції записують результат в тег div з ідентифікатором loginResult.

У разі невдалої спроби сценарію відображаються значення XMLHttpRequest.responseText, textStatus і errorThrown, що надаються бібліотекою jQuery.

У разі успішного виклику сценарію його відповідь перевіряється. Якщо змінна data відповіді не містить повідомлення про помилку, разом з повідомленням про успішне вході в систему відобразиться код користувача, який витягується Perl-сценарієм з таблиці users. У разі успіху приклад коду приховує форму і відображає тільки тег div.

Лістинг 3. login.js
$ (Document) .ready (function () {$ ( "form # loginForm"). Submit (function () {// loginForm відправлена ​​var username = $ ( '# username'). Attr ( 'value'); // отримати username var password = $ ( '# password'). attr ( 'value'); // отримати password if (username && password) {// значення не порожні $ .ajax ({type: "GET", url: " /cgi-bin/login.pl ", // URL-адресу Perl-сценарію contentType:" application / json; charset = utf-8 ", dataType:" json ", // відправка username і password як параметри в Perl- сценарій data: "username =" + username + "& password =" + password, // виклик сценарію був * не є успішним error: function (XMLHttpRequest, textStatus, errorThrown) {$ ( 'div # loginResult'). text ( "responseText : "+ XMLHttpRequest.responseText +", textStatus: "+ textStatus +", errorThrown: "+ errorThrown); $ ( 'div # loginResult'). addClass (" error ");}, // помилка // виклик сценарію був успе шним // дані містять JSON-значення, повернуті Perl-сценарієм success: function (data) {if (data.error) {// сценарій повернув помилку $ ( 'div # loginResult'). text ( "data.error:" + data.error); $ ( 'Div # loginResult'). AddClass ( "error"); } // якщо else {// вхід в систему був успішним $ ( 'form # loginForm'). Hide (); $ ( 'Div # loginResult'). Text ( "data.success:" + data.success + ", data.userid:" + data.userid); $ ( 'Div # loginResult'). AddClass ( "success"); } // інакше} // успіх}); // ajax} // якщо else {$ ( 'div # loginResult'). Text ( "enter username and password"); $ ( 'Div # loginResult'). AddClass ( "error"); } // інакше $ ( 'div # loginResult'). FadeIn (); return false; }); });

Perl

Для нашої дуже простий реалізації потрібні лише три модуля Perl: CGI, DBI і DBD :: mysql. За допомогою CGI-модуля Perl-сценарій отримує значення username і password, відправлені Ajax-кодом. Потім в сценарії виконується підключення до бази даних і запит на вибірку ідентифікатора користувача для конкретних значень. На підставі результату запиту формується JSON-відповідь з повідомленням або про помилку, або про успіх. Perl-сценарій встановлює тип вмісту в application / json і відповідає Ajax-коду JSON-рядком, яка потім зберігається в змінної variable бібліотекою jQuery.

Лістинг 4. login.pl
#! / Usr / bin / perl -T use CGI; use DBI; use strict; use warnings; # Прочитати параметри CGI my $ cgi = CGI-> new; my $ username = $ cgi-> param ( "username"); my $ password = $ cgi-> param ( "password"); # Підключитися до бази даних my $ dbh = DBI-> connect ( "DBI: mysql: database =; host =; port =", "", "") or die $ DBI :: errstr; # Перевірити ім'я користувача і пароль в базі даних my $ statement = qq {SELECT id FROM users WHERE username =? and password =?}; my $ sth = $ dbh-> prepare ($ statement) or die $ dbh-> errstr; $ Sth-> execute ($ username, $ password) or die $ sth-> errstr; my ($ userID) = $ sth-> fetchrow_array; # Створити JSON-рядок, відповідну результату перевірки в базі даних my $ json = ($ userID)? qq {{ "success": "login is successful", "userid": "$ userID"}}: qq {{ "error": "username or password is wrong"}}; # Повернути JSON-рядок print $ cgi-> header (-type => "application / json", -charset => "utf-8"); print $ json;

Перевірка коду

Можливо, ви захочете використовувати валідатор JSON для створення коректного JSON-відповіді.
Посилання на інформацію про перевірку коректності JSON наведені в розділі ресурси .

Відображення згенерованої JSON-рядки

JSON-рядок можна перевірити в браузері:

  1. Змініть $ cgi-> header (-type => "application / json", -charset => "utf-8"); на print $ cgi-> header ;.
  2. Введіть http: // your-domain-name_or_localhost /cgi-bin/login.pl?username=username1&password=password1 в адресному рядку браузера.
Малюнок 5. Знімок екрану з JSON-рядком

інструкції

  1. Створіть таблицю users за допомогою SQL-коду (змініть mydb на відповідне значення) і заповніть її тестовими даними.
  2. Скопіюйте login.html і login.js в папку htdocs вашого Web-сервера. Назва папки може бути іншим і залежить від налаштувань вашого Web-сервера.
  3. Скопіюйте login.pl в папку cgi-bin вашого Web-сервера. Назва папки може бути іншим і залежить від налаштувань вашого Web-сервера.
  4. Змініть перший рядок Perl-сценарію і введіть відповідну інформацію про вашу версії (зазвичай #! / Usr / bin / perl для Unix і #! \ Perl \ bin \ perl.exe для Windows) а також змініть mydb, localhost 2009, mydbusername і mydbpassword на відповідні значення.
  5. Введіть http: // your-domain-name_or_localhost /login.html в адресному рядку браузера.
  6. Введіть правильні і помилкові значення в поля username і password для перевірки такої різниці у поведінці.

важливо

Переконайтеся, що файли HTML, JavaScript і Perl знаходяться в одному і тому ж домені. В іншому випадку, коли Ajax спробує викликати ваш Perl-сценарій, відсутній в тому ж домені, що і викликає сценарій, порушиться політика same origin і буде повернута помилка (змінна data дорівнює null). Крім того, HTML-файл повинен видаватися Web-сервером за цим же принципом.
Посилання на докладнішу інформацію про політику same origin наведені в розділі ресурси .

висновок

Метою статті є представлення максимально простого і заснованого на сучасних технологіях коду, який можна використовувати в якості відправної точки для реалізації власного сервісу входу в систему. На базі статті можна створити набагато більш розвинену функціональність, включаючи систему захисту. Можливо, після вивчення цієї ідеї ви навіть захочете використовувати інші бази даних і мови програмування.

Ресурси для скачування

Схожі теми

  • оригінал статті Very simple login using Perl, jQuery, Ajax, JSON and MySQL (EN).
  • Blueprint - це CSS-інфраструктура з модифікованою ліцензією MIT, що гарантує сумісність з різними браузерами.
  • jQuery - це кросбраузерності JavaScript-бібліотека, яка (в числі інших функціональних можливостей) спрощує Ajax-взаємодія, сприяючи швидкій розробці Web-додатків.
  • Ajax API в jQuery - інформація про те, як виконати асинхронний HTTP-запит (Ajax) в jQuery.
  • Остання версія jQuery .
  • JSON - полегшений (в порівнянні з XML) формат даних для обміну інформацією між браузером і сервером.
  • JSONLint - програма перевірки коректності JSON.
  • Captcha - метод перевірки джерела вхідних даних, що надходять з Web-сайту.
  • Політика same origin - це концепція системи захисту, що запобігає доступу до методів, які перебувають в різних доменах.
  • У статті developerWorks Взаємодія між доменами з використанням JSONP. Частина 1: комбінування JSONP і jQuery для швидкого створення функціональних машапів приведена інформація про обмеження політики same origin (EN).
  • Для реалізації коду, відповідного стандартам, W3C надає сервіси Markup Validation Service і CSS Validation Service .

Підпишіть мене на повідомлення до коментарів

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

    Веселые задачи по математике 2 класс
    Во время занятий для того, чтобы немного переключить внимание школьников, но при этом не уйти от предмета, можно давать шутливые задачи на сообразительность. Буду пополнять коллекцию таких задач. Дополнительная

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: