• jquery kayıt formu. JQuery kullanarak adım adım kayıt. Etkinleştirme e-postası ile PHP MySQL kullanıcı kaydı

    Sayfayı yeniden yüklemeden dinamik olarak geçiş yapma özelliği ile oturum açma ve kayıt formlarının işlevlerine duyarlı. Pencere göründükten sonra kullanıcı kolayca birinden diğerine geçebilir ve gerekirse şifreyi değiştirme seçeneğini seçebilir.
    Bugün tüm bunların küçük ama çok güçlü bir jQuery eklentisi ve yeni CSS3 standartlarının birleşimiyle nasıl yapılabileceğine bakacağız.

    Giriş ve kayıt formlarını sitenizin her sayfasında kullanıcıların kullanımına sunmak istiyorsanız bu yöntem faydalı olacaktır. Kullanıcılar siteye girerken veya kayıt olurken başka bir sayfaya yönlendirilmeyecek ve gerekli tüm işlemleri “ödemeden çıkmadan” tek sayfa üzerinden gerçekleştirebilecekler.

    Açılır formların görünümü CSS3 kullanılarak uygulanır, eklentinin toplam ağırlığı hiç de büyük değildir, kalıcı pencerenin yanıtı ve yüklenmesi neredeyse hiç gecikmeden gerçekleşir.
    %100 duyarlı düzen, formlarla modalların yüksekliği ve genişliği, kullanıcı cihazlarının ekran boyutlarına göre otomatik olarak ayarlanır.

    Örneğe baktık, şimdi sitenizde nasıl kullanılacağını öğrenmek için modal pencerenin ve formların tüm ana bileşenlerine daha yakından bakalım.
    Açılır pencerenin oturum açma ve kayıt formlarıyla çalışması, popüler javascript kütüphanesi, jQuey çalıştırılabilir eklentisi ve oluşturulan CSS stilleri üzerine kurulmuştur. Tüm bu araçların sitenize bağlı olması gerekir. jQuey kütüphanesinin en son güncel sürümüne doğrudan Google'dan bağlanılabilir, main.js eklenti dosyasının kendisi ve hazır style.css stil seti arşivde bulunabilir.
    Javascript kapanış etiketinden önce yazılır, CSS stilleri kopyalanıp sitenizin .css stil dosyasına eklenebilir.

    HTML Yapısı:

    Karartılmış bir arka plan üzerinde modal pencerelerin ve kontrollerin bulunduğu satır içi formların temel kabı sayfanın gövdesine yerleştirilir. Daha iyi anlaşılması için sektörleri sınırlandırdım ve yorumlar ekledim. Tüm tasarım öğeleri belirli sınıflar aracılığıyla CSS'ye sıkı bir şekilde bağlanmıştır, bu nedenle formların tasarımını sitelerinizin genel tasarımına uyacak şekilde değiştirmek zor değildir.

    < div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" >Giriş< li>< a href= "#0" >Kayıt< div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" >E-posta< input class = id= "signin-email" type= "email" placeholder= "E-posta" > < span class = "cd-error-message" >İşte hata mesajı!< p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" >Şifre< input class = "full-width has-padding has-border" id= "signin-password" type= "text" placeholder= "Şifre" > < a href= "#0" class = "hide-password" >Saklamak< span class = "cd-error-message" >İşte hata mesajı!< p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" >Beni Hatırla< p class = "fieldset" > < input class = "full-width" type= "submit" value= "İçeri gel" > < p class = "cd-form-bottom-message" >< a href= "#0" >Parolanızı mı unuttunuz?< div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" >Kullanıcı adı< input class = "full-width has-padding has-border" id= "signup-username" type= "text" placeholder= "Kullanıcı adı" > < span class = "cd-error-message" >İşte hata mesajı!< p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" >E-posta< input class = "full-width has-padding has-border" id= "signup-email" type= "email" placeholder= "E-posta" > < span class = "cd-error-message" >İşte hata mesajı!< p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" >Şifre< input class = "full-width has-padding has-border" id= "signup-password" type= "text" placeholder= "Şifre" > < a href= "#0" class = "hide-password" >Saklamak< span class = "cd-error-message" >İşte hata mesajı!< p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" >katılıyorum< a href= "#0" >koşullar< p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Bir hesap oluşturun" > < div id= "cd-reset-password" > < p class = "cd-form-message" >Parolanızı mı unuttunuz? Lütfen e-mail adresinizi giriniz. Yeni bir şifre oluşturmak için bir bağlantı alacaksınız.< form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" >E-posta< input class = "full-width has-padding has-border" id= "reset-email" type= "email" placeholder= "E-posta" > < span class = "cd-error-message" >İşte hata mesajı!< p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Parola Yenile" > < p class = "cd-form-bottom-message" >< a href= "#0" >Girişe geri dön< a href= "#0" class = "cd-close-form" >kapalı

    • Giriş
    • Kayıt

    E-posta Hata mesajı burada!

    Şifre Gizle Hata mesajı burada!

    Beni Hatırla

    Parolanızı mı unuttunuz?

    Kullanıcı Adı Hata mesajı burada!

    E-posta Hata mesajı burada!

    Şifre Gizle Hata mesajı burada!

    Koşullara katılıyorum

    Parolanızı mı unuttunuz? Lütfen e-mail adresinizi giriniz. Yeni bir şifre oluşturmak için bir bağlantı alacaksınız.

    E-posta Hata mesajı burada!

    Girişe geri dön

    kapalı



    CSS Stilleri:

    Temel şablon ve form kontrolleri yazar tarafından popüler, düz bir tarzda (Düz) ve minimalizme açık bir vurgu yapılarak oluşturulmuştur. Gereksiz hiçbir şey yok, orta derecede şeffaf koyulaşan bir arka plan, okunması kolay renkler, iyi seçilmiş bir yazı tipi ve giriş alanları için simgeler. CSS özelliklerini kullanarak herhangi bir form öğesini kolayca değiştirebilirsiniz.

    .cd-user-modal ( konum : sabit ; üst : 0 ; sol : 0 ; genişlik : %100 ; yükseklik : %100 ; arka plan : rgba (52 , 54 , 66 , 0,9 ) ; z-index : 3 ; taşma- y: otomatik; imleç: işaretçi; görünürlük: gizli; opaklık: 0; -webkit-transition: opaklık 0,3s 0, görünürlük 0 0,3s; -moz-transition: opaklık 0,3s 0, görünürlük 0 0,3s; geçiş: opaklık 0,3 s 0, görünürlük 0 0,3s; ) .cd-user-modal .is-visible ( görünürlük: görünür ; opaklık: 1 ; -webkit-transition: opaklık 0,3s 0, görünürlük 0 0 ; -moz-transition: opaklık 0,3s 0 , görünürlük 0 0 ; geçiş: opaklık 0,3s 0 , görünürlük 0 0 ; ) .cd-user-modal .is-visible .cd-user-modal-container ( -webkit-transform: TranslateY(0 ) ; -moz- transform: TranslateY(0 ) ; -ms-transform: TranslateY(0 ) ; -o-transform: TranslateY(0 ) ; transform: TranslateY(0 ) ; ) .cd-user-modal-container ( konum : göreceli ; genişlik : %90;maksimum genişlik: 600 piksel; arka plan: #FFF; kenar boşluğu: 3em otomatik 4em; imleç: otomatik; sınır yarıçapı: 0,25em; -webkit-transform: TranslateY(-30px ) ; -moz-transform: TranslateY(-30px) ; -ms-transform: TranslateY(-30px ) ; -o-dönüştürme: TranslateY(-30px ) ; transform : TranslateY(-30px ) ; -webkit-geçiş-özelliği: -webkit-transform; -moz-geçiş-özelliği: -moz-transform; geçiş özelliği: dönüşüm; -webkit-geçiş-süresi: 0,3s; -moz-geçiş-süresi: 0,3s; geçiş süresi: 0,3s; ) .cd-user-modal-container .cd-switcher : after ( content : "" ; display : table ; clear : her ikisi de ; ) .cd-user-modal-container .cd-switcher li ( width : 50% ; float : left ; text-align : center ; ) .cd-user-modal-container .cd-switcher li: ilk çocuk a ( border-radius : .25em 0 0 0 ; ) .cd-user-modal-container .cd -switcher li: son çocuk a ( border-radius : 0 .25em 0 0 ; ) .cd-user-modal-container .cd-switcher a ( display : blok ; genişlik : 100% ; height : 50px ; line-height : 50 piksel ; arka plan : #d2d8d8 ; renk : #809191 ; ) .cd-user-modal-container .cd-switcher a.selected ( arka plan : #FFF ; renk : #505260 ; ) yalnızca @media ekranı ve (minimum genişlik) : 600px ) ( .cd-user-modal-container ( kenar boşluğu : 4em otomatik ; ) .cd-user-modal-container .cd-switcher a ( height : 70px ; line-height : 70px ; ) ) .cd-form ( dolgu: 1. 4em; ) .cd-form .fieldset ( konum : göreceli ; kenar boşluğu : 1,4em 0 ; ) .cd-form .fieldset : ilk çocuk ( kenar boşluğu üst : 0 ; ) .cd-form .fieldset : son çocuk ( kenar boşluğu- Bottom : 0 ; ) .cd-form label ( font-size : 14px ; font-size : 0,875rem ; ) .cd-form label.image-replace ( /* metni simgeyle değiştirin */ display : inline-block ; konum : mutlak ; sol : 15 piksel ; üst : %50 ; alt : otomatik ; -webkit-transform: TranslateY(-50% ) ; -moz-transform: TranslateY(-50% ) ; -ms-transform: TranslateY(-50%) ) ; -o-transform: TranslateY(-50%) ; transform:translateY(-50%) ; yükseklik: 20 piksel; genişlik: 20 piksel; taşma: gizli; metin girintisi: %100; beyaz boşluk: nowrap; renk: şeffaf ; text-shadow : yok ; arka plan tekrarı : tekrarlama yok; arka plan konumu : %50 0 ; ) /* Giriş alanı simgeleri */ .cd-form label.cd-kullanıcı adı ( arka plan resmi : url (". ./img/cd-icon-username.svg" ) ; ) .cd-form label.cd-email ( arka plan resmi : url ("../img/cd-icon-email.svg" ) ; ) .cd-form label.cd-password ( arka plan resmi : url ("../img/cd-icon-password.svg" ) ; ) .cd-form girişi ( kenar boşluğu : 0 ; dolgu : 0 ; border- radius : 0,25em ; ) .cd-form input.full-width ( width : 100% ; ) .cd-form input.has-padding ( padding : 12px 20px 12px 50px ; ) .cd-form input.has-border ( border : 1px katı #d2d8d8 ; -webkit-appearance: yok ; -moz-appearance: yok ; -ms-appearance: yok ; -o-appearance: yok ; görünüm: yok ; ) .cd-form input.has-border : odak ( border-color : #343642 ; box-shadow : 0 0 5px rgba (52 , 54 , 66 , 0,1 ) ; anahat : yok ; ) .cd-form input.has-error ( border : 1px katı #d76666 ; ) .cd-form girişi[ tür= şifre] ( /* gizleme düğmesi için boşluk */ sağ dolgu : 65 piksel ; ) .cd-form girişi[ tür= gönder] ( dolgu : 16 piksel 0 ; imleç : işaretçi ; arka plan : #2f889a ; renk : #FFF ; yazı tipi ağırlığı : kalın ; kenarlık : yok ; -webkit-appearance: yok; -moz-görünüm: yok; -ms-görünüm: yok; -o-görünüm: yok; görünüm: yok; ) .no-touch .cd-form girişi[ tür= gönder] : fareyle üzerine gelin, .no-touch .cd-form girişi[ tür= gönder] : odak ( arka plan : #3599ae ; taslak : yok ; ) .cd-form . şifreyi gizle ( görüntü : satır içi blok ; konum : mutlak ; sağ : 0 ; üst : 0 ; dolgu : 6px 15px ; border-left : 1px katı #d2d8d8 ; üst : %50 ; alt : otomatik ; -webkit-transform: TranslateY(-50% ) ; -moz-transform: TranslateY(-50% ) ; -ms-transform: TranslateY(-50% ) ; -o-transform: TranslateY(-50% ) ; transform : TranslateY(-50%) ) ; yazı tipi boyutu : 14 piksel ; yazı tipi boyutu : 0. 875rem; renk: #343642; ) .cd-form .cd-error-message (görüntü: satır içi blok; konum: mutlak; sol: -5px; alt: -35px; arka plan: rgba (215, 102, 102, 0,9); dolgu: .8em; z-index : 2 ; color : #FFF ; font-size : 13px ; font-size : 0,8125rem ; border-radius : 0,25em ; /* tıklamaları ve dokunmaları önleyin */ pointer-events : yok ; görünürlük : gizli ; opaklık : 0 ; -webkit-transition: opaklık 0,2s 0, görünürlük 0 0,2s; -moz-transition: opaklık 0,2s 0, görünürlük 0 0,2s; geçiş: opaklık 0,2s 0, görünürlük 0 0,2s ; ) .cd-form .cd-error-message :: after ( /* hata mesajı köşesi */ içerik : "" ; konum : mutlak ; sol : 22 piksel ; alt : %100 ; yükseklik : 0 ; genişlik : 0 ; kenarlık-sol : 8 piksel katı şeffaf ;kenar-sağ: 8 piksel katı şeffaf ;kenar-alt: 8 piksel katı rgba(215, 102, 102, 0,9); görünürlük: görünür; -webkit geçişi: opaklık 0,2s 0, görünürlük 0 0; -moz-geçiş: opaklık 0,2s 0, görünürlük 0 0; geçiş: opaklık 0,2s 0, görünürlük 0 0; ) @media yalnızca ekran ve (minimum genişlik: 600 piksel) ( .cd-form ( dolgu : 2em ; ) .cd-form .fieldset ( kenar boşluğu : 2em 0 ; ) .cd-form .fieldset : ilk çocuk ( kenar boşluğu- top : 0 ; ) .cd-form .fieldset : last-child ( border-bottom : 0 ; ) .cd-form girişi.has-padding ( padding : 16px 20px 16px 50px ; ) .cd-form girişi[ type= gönder ] ( dolgu : 16px 0 ; )) .cd-form-message ( dolgu : 1,4em 1,4em 0 ; yazı tipi boyutu : 14 piksel ; yazı tipi boyutu : 0,875 rem ; satır yüksekliği : 1,4 ; text-align : center ; ) @media yalnızca ekran ve (min-width: 600px) ( .cd-form-message ( padding : 2em 2em 0 ; )) .cd-form-bottom-message ( konum : mutlak ; genişlik : 100% ; left : 0 ; alt: -30 piksel; metin hizalama: orta; yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0,875 rem; ) .cd-form-bottom-message a ( renk: #FFF; metin dekorasyonu: altı çizili; ) .cd- close-form ( /* sağ üst düğme X stili */ display : blok ; konum: mutlak; genişlik: 40 piksel yükseklik: 40 piksel sağ: 0 üst: -40px; arka plan: url("../img/cd-icon-close.svg" ) tekrarlanmayan merkez merkez; metin girintisi: %100; beyaz boşluk : nowrap ; taşma: gizli ) @media only ekranı ve (minimum genişlik: 1170px) ( .cd-close-form ( display : none ; )) #cd-login , #cd-signup , #cd-reset-password ( display : none ; ) # cd-login .is-selected , #cd-signup .is-selected , #cd-reset-password .is-selected ( display : blok ; )

    cd-user-modal ( konum: sabit; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; arka plan: rgba(52, 54, 66, 0,9); z-endeksi: 3; taşma-y : otomatik; imleç: işaretçi; görünürlük: gizli; opaklık: 0; -webkit-transition: opaklık 0,3s 0, görünürlük 0 0,3s; -moz-transition: opaklık 0,3s 0, görünürlük 0 0,3s; geçiş: opaklık 0,3s 0, görünürlük 0 0,3s; ), görünürlük 0 0; geçiş: opaklık 0,3s 0, görünürlük 0 0; ) : TranslateY(0); -ms-transform: TranslateY(0); -o-transform: TranslateY(0) ; transform: TranslateY(0); ) .cd-user-modal-container ( konum: göreceli; genişlik: 90 %; maksimum genişlik: 600 piksel; arka plan: #FFF; kenar boşluğu: 3em otomatik 4em; imleç: otomatik; kenarlık- yarıçap: 0,25em; -webkit-transform: TranslateY(-30px); -moz-transform: TranslateY(-30px); -ms-transform: TranslateY(-30px); -o-dönüştürme: TranslateY(-30px); dönüşüm: TranslateY(-30px); -webkit-geçiş-özelliği: -webkit-transform; -moz-geçiş-özelliği: -moz-transform; geçiş özelliği: dönüşüm; -webkit-geçiş-süresi: 0,3 saniye; -moz-geçiş-süresi: 0,3s; geçiş süresi: 0,3 saniye; ) .cd-user-modal-container .cd-switcher:after ( içerik: ""; görüntüleme: tablo; temizle: her ikisi de; ) .cd-user-modal-container .cd-switcher li ( genişlik: %50; float : sol; text-align: center; ) .cd-user-modal-container .cd-switcher li:first-child a ( border-radius: 0,25em 0 0 0; ) .cd-user-modal-container .cd -switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a ( display: blok; genişlik: %100; yükseklik: 50px; line-height : 50 piksel; arka plan: #d2d8d8; renk: #809191; ) .cd-user-modal-container .cd-switcher a.selected ( arka plan: #FFF; renk: #505260; ) yalnızca @media ekranı ve (minimum genişlik) : 600px) ( .cd-user-modal-container ( kenar boşluğu: 4em otomatik; ) .cd-user-modal-container .cd-switcher a ( height: 70px; line-height: 70px; ) ) .cd-form ( dolgu: 1,4em; ) .cd-form .fieldset ( konum: göreceli; kenar boşluğu: 1,4em 0; ) .cd-form .fieldset:first-child ( border-top: 0; ) .cd-form .fieldset:last -child ( kenar boşluğu alt: 0; ) .cd-form etiketi ( yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0,875 rem ) .cd-form label.image-replace ( /* metni simgeyle değiştirin */ display: inline-block; konum: mutlak; sol: 15 piksel; üst: %50; alt: otomatik; -webkit-transform: TranslateY(- %50); -moz-transform: TranslateY(-%50); -ms-transform: TranslateY(-%50); -o-transform: TranslateY(-%50); transform: TranslateY(-%50); yükseklik : 20 piksel; genişlik: 20 piksel; taşma: gizli; metin girintisi: %100; beyaz boşluk: şimdi rap; renk: şeffaf; metin gölgesi: yok; arka plan tekrarı: tekrar yok; arka plan konumu: %50 0; ) /* Giriş alanı simgeleri */ .cd-form label.cd-username ( arka plan resmi: url(". ./img/cd-icon-username.svg"); ) .cd-form label.cd-email ( arka plan resmi: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password ( arka plan resmi: url("../img/cd-icon-password.svg"); ) .cd-form girişi ( kenar boşluğu: 0; dolgu: 0; kenar yarıçapı: 0,25 em; ) .cd-form input.full-width ( width: 100%; ) .cd-form input.has-padding ( padding: 12px 20px 12px 50px; ) .cd-form input.has-border ( border: 1px katı #d2d8d8; -webkit-appearance: yok; -moz-appearance: yok; -ms-appearance: yok; -o-appearance: yok; görünüm: yok; ) .cd-form girişi.has-border:focus ( border -color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); anahat: yok; ) .cd-form input.has-error ( border: 1px katı #d76666; ) .cd- form girişi ( /* Gizle düğmesi için boşluk */ sağ dolgu: 65 piksel; ) .cd-form girişi ( dolgu: 16 piksel 0; imleç: işaretçi; arka plan: #2f889a; renk: #FFF; yazı tipi ağırlığı: kalın; kenarlık : yok; -webkit-appearance: yok; -moz-appearance: yok; -ms-appearance: yok; -o-appearance: yok; görünüm: yok; ) .no-touch .cd-form girişi:hover, .no-touch .cd-form girişi:focus ( arka plan: #3599ae; taslak: yok; ) .cd-form .hide-password ( display: inline-block; pozisyon: mutlak; sağ: 0; üst: 0; dolgu: 6px 15px; border-left: 1px katı #d2d8d8; üst: %50; alt: otomatik; -webkit-transform: TranslateY(-50%); -moz- transform: TranslateY(-50%); -ms-transform: TranslateY(-50%); -o-transform: TranslateY(-50%); transform: TranslateY(-50%); yazı tipi boyutu: 14 piksel; yazı tipi- boyut: 0,875rem; renk: #343642; ) .cd-form .cd-error-message ( ekran: satır içi blok; konum: mutlak; sol: -5 piksel; alt: -35 piksel; arka plan: rgba(215, 102, 102, 0,9); dolgu: 0,8em; z-index: 2; renk: #FFF; yazı tipi boyutu: 13 piksel; yazı tipi boyutu: 0,8125rem; kenarlık yarıçapı: 0,25em; /* tıklamaları ve dokunmaları önle */ işaretçi -events: yok; görünürlük: gizli; opaklık: 0; -webkit-transition: opaklık 0,2s 0, görünürlük 0 0,2s; -moz-transition: opaklık 0,2s 0, görünürlük 0 0,2s; geçiş: opaklık 0,2s 0, görünürlük 0 0,2s; ) .cd-form .cd-error-message::after ( /* hata mesajı köşesi */ içerik: ""; konum: mutlak; sol: 22 piksel; alt: %100; yükseklik: 0; genişlik: 0; kenarlık - sol: 8px katı şeffaf; border-right: 8px katı şeffaf; border-bottom: 8px katı rgba(215, 102, 102, 0,9); ) .cd-form .cd-error-message.is-visible ( opacity: 1 ; görünürlük: görünür; -webkit-transition: opaklık 0,2s 0, görünürlük 0 0; -moz-transition: opaklık 0. 2s 0, görünürlük 0 0; geçiş: opaklık 0,2s 0, görünürlük 0 0; ) @media yalnızca ekran ve (minimum genişlik: 600 piksel) ( .cd-form ( dolgu: 2em; ) .cd-form .fieldset ( kenar boşluğu: 2em 0; ) .cd-form .fieldset:first-child ( kenar boşluğu- top: 0; ) .cd-form .fieldset:last-child ( marj-bottom: 0; ) .cd-form girişi.has-padding ( dolgu: 16px 20px 16px 50px; ) .cd-form girişi ( dolgu: 16px 0; )) .cd-form-message ( padding: 1,4em 1,4em 0; font-size: 14px; font-size: 0,875rem; line-height: 1,4; text-align: center; ) @media yalnızca ekran ve (minimum genişlik: 600 piksel) ( .cd-form-message ( dolgu: 2em 2em 0; ) ) .cd-form-bottom-message ( konum: mutlak; genişlik: %100; sol: 0; alt: -30 piksel; metin hizalama: merkez; yazı tipi boyutu: 14 piksel; yazı tipi boyutu: 0,875 rem; ) .cd-form-bottom-message a ( renk: #FFF; metin dekorasyonu: altı çizili; ) .cd-close-form ( / * sağ üst düğme X stili */ ekran: blok; konum: mutlak; genişlik: 40 piksel; yükseklik: 40 piksel; sağ: 0; üst: -40 piksel; arka plan: url("../img/cd-icon-close.svg) ") tekrarlanmayan merkez merkez; metin girintisi: %100; beyaz boşluk: şimdirap; taşma: gizli; ) @media only ekranı ve (min-width: 1170px) ( .cd-close-form ( display: none; )) #cd-login, #cd-signup, #cd-reset-password ( display: none; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected ( display: blok; )

    Görünüm geçiş efektinde, modal pencerenin kapatıldığında kararmasını sağlamak için bir gecikme eklendi.

    Not:. Tüm giriş alanlarının yazı tipi boyutu varsayılan olarak 16 piksele ayarlanmıştır. Bu, mobil cihazlarda görüntülendiğinde oluşan otomatik ölçeklendirmeyi önler.

    Yazarın, eklentinin burjuva versiyonu yer almaktadır. Aynı yerden orjinalini de indirebilirsiniz.
    Rusça sürümünü Yandex.Diskimden alabilirsiniz, gerekli tüm dosyalar dikkatlice tek bir arşivde paketlenmiştir, bundan önce bu harika jQuery eklentisinin tamamen uyarlanmış, canlı örneğini görmeyi unutmayın:

    Saygılarımla, Andrew

    İyi gün dostları! PHP'de kullanıcı kaydına bir göz atalım. Öncelikle kullanıcı kaydımızın koşullarını tanımlayalım:

    • Parola MD5 algoritması kullanılarak şifrelenir
    • Şifre "tuz" olacak
    • Giriş meşgul kontrolü
    • Mektupla kullanıcı aktivasyonu.
    • MySQL DBMS'ye veri kaydetme ve saklama

    Bu scripti yazabilmek için kullanıcı kaydının ne olduğunu anlamamız gerekiyor. Kullanıcı kaydı, gerçek kullanıcı verilerinin elde edilmesi, işlenmesi ve saklanmasıdır.

    Basit bir ifadeyle, kayıt, bizim durumumuzda kullanıcıya yetki verebileceğimiz belirli verilerin kaydı ve depolanmasıdır - bu, Giriş ve Şifredir.

    Yetkilendirme, belirli bir kişiye veya bir grup kişiye belirli eylemleri gerçekleştirme haklarının verilmesi ve bu eylemleri gerçekleştirmeye çalışırken bu hakların doğrulanması işlemidir. Basitçe söylemek gerekirse, yetkilendirmenin yardımıyla sitemizdeki belirli bir içeriğe erişimi kısıtlayabiliriz.

    Yetkilendirme ile girişimizi gerçekleştirmek için script dizin yapısına bir göz atalım. Komut dosyalarını mantıksal parçalara ayırmamız gerekiyor. Kayıt ve yetkilendirme modüllerini ayrı bir dizine yerleştirdik. Ayrıca MySQL veritabanı bağlantısını, kullanıcı tanımlı işlevler dosyasını, CSS stil sayfasını ve HTML şablonumuzu ayrı dizinlere yerleştireceğiz. Bu yapı, komut dosyaları arasında hızlı bir şekilde gezinmenizi sağlar. Bir sürü modül vb. içeren büyük bir siteniz olduğunu hayal edin. ve eğer düzen yoksa bu kadar karmaşa içinde bir şey bulmak çok zor olacaktır.

    Tüm verileri MySQL DBMS'de saklayacağımız için, kayıt verilerini saklayacağımız küçük bir tablo oluşturalım.

    Öncelikle veritabanında bir tablo oluşturmanız gerekir. Tabloya bez_reg adını verelim; burada bez tablo öneki ve reg tablonun adıdır.

    Tablo yapısı: bez_reg -- -- Tablo yapısı `bez_reg` -- CREATE TABLE IF EXISTS `bez_reg` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` varchar(200) NOT NULL, `pass` varchar( 32) NULL DEĞİL, `salt` varchar(32) NULL DEĞİL, `active_hex` varchar(32) NULL DEĞİL, `status` int(1) NULL DEĞİL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; Şimdi daha fazla çalışma için ana komut dosyalarını oluşturalım. INDEX.PHP DOSYASI

    YAPILANDIRMA.PHP DOSYASI

    less/reg/?mode=auth">Giriş Yap

    • Devamını oku: