• This is a read only backup of the old Emudevs forum. If you want to have anything removed, please message me on Discord: KittyKaev

New simple responsive registration page for TrinityCore 3.3.5

Tok124

Respected Member
Hello :)

I have not released anything here in a long time so i decided to release my latest registration page. I know that there is already a bunch of registration pages all over the internet for TrinityCore 3.3.5 but most of them are not responsive and most of them does not have other pages like server status or how to connect guide etc but this site has all that. So i hope you will enjoy this site. If you find a problem please comment or send a PM. And let me know what you guys think about this site

So here is a screenshot of the registration
2z882oo.png


Here are some more screenshots for the other pages
http://i65.tinypic.com/dqtqh.png
http://i68.tinypic.com/2le5wzn.png
http://i64.tinypic.com/2mhfll5.png
http://i64.tinypic.com/9bawwn.png
http://i65.tinypic.com/muu3k8.png
http://i64.tinypic.com/4hfuhl.png

DOWNLOAD

To use this site you need to go in config folder and make sure the configs is correct. If you need any help with this then send a PM or a comment
 

Vitrex

Moderator
Try to add some jquery AJAX or POST functions, instead of page reloading.
Everything else looks clean and i'm glad you are using Bootstrap ! :)
 

Vitrex

Moderator
Sure.

just add to your script these lines (to the bottom before </body> tag) :
Code:
<script src="js/magic.js"></script>

also add this line code above your form

Code:
<div class = "answer"></div>

the magic.js file

Code:
$(document).ready(function() {

    // process the form
    $('#register').submit(function(event) { // selct form by id tag

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'name'              : $('input[name=name]').val(),
            'pwd'              : $('input[name=pwd]').val(),
            'pwd_c'              : $('input[name=pwd_c]').val(),
            'email'              : $('input[name=email]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'functions/register.callback.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json' // what type of data do we expect back from the server
        })
            // using the done promise callback
            .done(function(data) {

                // here we will handle errors and validation messages
                if ( ! data.success) {
                    
                    // handle errors for name ---------------
                    if (data.errors.name) {
                        $('.answer').hide().html('<div class="alert alert-danger">'+ data.errors.name + '</div>').slideDown("slow"); 
                        setTimeout(function () {
                            $('.answer').slideUp();
                        }, 2000);
                    }

                } else {
                    
                    // ALL GOOD! just show the success message!
                    $('.answer').hide().html('<div class="alert alert-success">' + data.message + '</div>' ).slideDown("slow");
                    $("form")[0].reset();
                    setTimeout(function () {
                        $('.answer').slideUp();
                    }, 1000);
                    // usually after form submission, you'll want to redirect
                    // window.location = '/thank-you'; // redirect a user to another page
                    //alert('success'); // for now we'll just alert the user

                }

            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });
    
});

now lets see what we need to do inside our functions/register.php

Code:
<?php         
    $errors         = array();      // array to hold validation errors
    $data           = array();      // array to pass back data

    // validate the variables ======================================================
        // if any of these variables don't exist, add an error to our $errors array
       if (empty($_POST['name'])) {
            $errors['name'] = 'Please enter account name.';
        }
         if (empty($_POST['pwd'])) {
            $errors['name'] = 'Please enter password.';
        }
         if (empty($_POST['pwd_c'])) {
            $errors['name'] = 'Please confirm password.';
        }
         if (empty($_POST['email'])) {
            $errors['name'] = 'Please enter your email.';
        }
        
        $username = $_POST['name'];
        $password = $_POST['pwd'];
        $passwordC = $_POST['pwd_c'];
        $email = $_POST['email'];
        // <-- Make sure to add some filters i copied this from my script where i had Clean function that trims all symbols and unwanted stuff
        
        $sql = "SELECT * FROM users WHERE username = '".$username."' AND password = '".$password."'";
        $stmt = mysqli_query($sql);
        $row_count = mysqli_num_rows($stmt);
        
        if($row_count <= 0) {
            if($password == $passwordC){
                if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
                        // perform data insert
                } else {
                    $errors['name'] = "Email is invalid, please use valid email.";
                }
            } else {
                $errors['name'] = "Passowrds don't match , please double check spelling.";
            }
        } else {
            $errors['name'] = "Account name already in use, please select new one.";
        }
        
        
    // return a response ===========================================================

        // if there are any errors in our errors array, return a success boolean of false
        if ( ! empty($errors)) {
            // if there are items in our errors array, return those errors
            $data['success'] = false;
            $data['errors']  = $errors;
        } else {
            $data['success'] = true;
            $data['message'] = $result;
        }

    // return all our data to an AJAX call
    echo json_encode($data);

Here you go, i added comments everywhere. you just need to adapt this for your script. if you have any problems. ask :)

EDIT.

Also i noticed you are mixing PHP with HTML a lot. try to split them into a files and only output the needed function result like
Code:
<?php echo randomFunctionResult(); ?>

Also try to use more parameters on functions to make them more dynamic. and last but not least, practice with caching system. add .txt file with players online and check not on every page refresh. but simply use jquery .load function to load the php file that checks online players and writes the .txt files and if file exists and it's been longer than 5 minutes from last file update simply run another check - otherwise parse your txt file in this case you save load time and memory OR use me-cache to cache the database. up to you. ( i suggest start practice with simple tricks and work arounds and then move to complicated ones as mem cache). Good luck !

EDIT 2.

Also noticed this :
Code:
if($racename == "Tauren" || $racename == "Blood-Elf" || $racename == "Undead" || $racename == "Troll" || $racename == "Orc") {

you should arrays for this (easier and more clean way for handling multiple results).
for example

Code:
$horde_faction = array("Tauren","Blood-Elf,"Undead","Troll","Orc");

if(in_array($racename,$horder_faction)){
// character is horde
} else {
// he is alliance
}
 
Last edited:

Tok124

Respected Member
Btw. I already got something very similar to magic.js in my js folder :) But your version of it may be better. I don't know :)
 

Islehunter

New member
Server Status

Hi,
great work. thx alot.
Regristration works perfect but Server Status dont work.
Look at 62.159.203.75 :)

Any Suggestions?

Greetings
Islehunter
 
Top