Вдоволь "накопипастившись", если можно так выразится, я решил публиковать собственные статьи на тему программирования. Начну с моего любимого фрэймворка - Ext JS. Мое первое впечетление о данном фрэймворке было ужасным, я проклинал тот день когда начальство сказало, что пора бросать jQuery и переходить на Ext JS. На тот момент я и представить себе не мог, что это еще за Ext JS и с чем его едят... проведя пару месяцев за мануалами и примерами кода, я понял что данный фрэймворк - это великая сила!
Начнем с формы для авторизации. Зачем нужна авторизация и как она осуществляется - я писать не собираюсь. В данном примере я лишь приведу кусок кода, который позволяет построить красивую формочку, для ввода данных и отправки на сервер с помощью Ajax'a.
Создаем форму с двумя полями (логин, пароль): login_form = new Ext.form.FormPanel({ labelWidth: 55, frame: true, defaultType: 'textfield', items: [{ fieldLabel: 'Login',name: 'login',anchor:'100%' },{ fieldLabel: 'Password',name: 'password',inputType: 'password',anchor: '100%' }] });
Теперь для нашей формы необходим контейнер. Это может быть HTML элемент DIV, либо что-то по интереснее
Мы создали плавающее окно, в которое поместили нашу форму ( items: login_form). Теперь необходимо реализовать Ajax запрос, который будет обрабатывать форму и отправлять полученные данные на сервер. Для этого мы расширим функционал кнопки login:
На севрер отправляется $_POST массив из двух элементов user_login и user_password. Обработав данные, можно вернуть сообщение об ошибки. Если сервер ничего не вернул, значит авторизация прошла успешно и пользователя перебросит на страницу админки window.location.href = '/admin';.
Чтобы вывести окно на экран, необходимо у login_window вызвать метод show() -> login_window.show(); Вызов рабочего окна можно установить по нажатию на кнопку либо другой HTML элемент.