[Development] Modern Board - [PHP, OSS]

[Makarov]

{logo}

Modern Board is a forum software made completely from scratch. It is made up of many languages and is object oriented. It is very lightweight as of now. It will include all of the things normal boards have, minus the plugin system, which could change at a later date. I am a huge beginner with PHP so bear with me if I do something that can be done in a better manner.

{reserved text}

Foreground Features

1. Users can register.
2. Users can log in.
3. Users can log out.
4. Users can change password.
5. Users can post on each others walls.
6. Users can shout on the shoutbox.
7. System now shows Online Users(needs a major re code)
8. Users are unable to spam walls anymore.
9. Users are unable to spam the shoutbox anymore.
10. Users can use commands in the shoutbox.

Background Features

1. Core class with proper OOP.
2. Proper error display.
3. Easy-To-Edit configuration file.
4. Clean template system & source code.
5. User Caching System

Languages

1. PHP
2. AJAX
3. HTML
4. CSS
5. jQuery
6. Javascript
7. SQL

If the language is green it has already been implemented if red, it is planned.



Live Demo: ​mB - Powered by mBoard

Once again, I'm a beginner so if you would give me some tips and feedback that would be great. Also I know the style sucks, it's just a placeholder for when I can get better CSS files(not very good at designing myself).

[MentaL]

[Kimthaonly]

quite good, maybe i could design a layout for you?

[Makarov]

quite good, maybe i could design a layout for you?

That would be great, I believe I have you on MSN? if not

me@hubbainn.co.cc

[RastaLulz]

Why do I see account settings, and logout? I haven't registered, nor have I logged in.

Also, where is the board? all I see is a shout box.

[Makarov]

Why do I see account settings, and logout? I haven't registered, nor have I logged in.

Also, where is the board? all I see is a shout box.

Brackets were out of order.

For some reason I tackled the shoutbox first.

I'm going to start the actual forum(posting, replying etc) within a few hours.

[TimeBomb]

HTML Tips:
Use less line breaks and more divs.
For the top right navigation, use a list, not just plain links.


PHP Tips:
One problem I see here is that when you, for example, post a shoutbox message, and then try to refresh the page, it tries to resubmit the data. This is a common problem when coding with forms. It can be solved using the Post/Redirect/Get design pattern. Look more in to it through google, and wikipedia - Post/Redirect/Get - Wikipedia, the free encyclopedia


Javascript tips:
It doesn't look you have much - if any - javascript on the site right now. When you do implement javascript, make sure you keep it all in external files (unless it's in the onClick property of an element or something..), and keep the javascript file calls at the bottom of the site whenever possible.
When javascript is at the top of the site, the site has to wait for all the javascript to download and load before it fully loads the page. This is obviously bad. Putting as much javascript as possible at the bottom of the page helps a lot with page load time. Some javascript needs to be called before certain elements, and that is okay if it is the only option. But things like jquery can be called from the bottom of the page just fine, and it makes the page load time a lot faster.


jQuery tips:
Not much to say here, except that jQuery is a library on top of Javascript - it is not its own language.


Bug?:
The page seems to reload every 5-10 seconds for seemingly no reason.


Other than all that - good job so far, and good luck on the journey ahead of you ;).

[Makarov]

HTML Tips:
Use less line breaks and more divs.
For the top right navigation, use a list, not just plain links.


PHP Tips:
One problem I see here is that when you, for example, post a shoutbox message, and then try to refresh the page, it tries to resubmit the data. This is a common problem when coding with forms. It can be solved using the Post/Redirect/Get design pattern. Look more in to it through google, and wikipedia - Post/Redirect/Get - Wikipedia, the free encyclopedia


Javascript tips:
It doesn't look you have much - if any - javascript on the site right now. When you do implement javascript, make sure you keep it all in external files (unless it's in the onClick property of an element or something..), and keep the javascript file calls at the bottom of the site whenever possible.
When javascript is at the top of the site, the site has to wait for all the javascript to download and load before it fully loads the page. This is obviously bad. Putting as much javascript as possible at the bottom of the page helps a lot with page load time. Some javascript needs to be called before certain elements, and that is okay if it is the only option. But things like jquery can be called from the bottom of the page just fine, and it makes the page load time a lot faster.


jQuery tips:
Not much to say here, except that jQuery is a library on top of Javascript - it is not its own language.


Bug?:
The page seems to reload every 5-10 seconds for seemingly no reason.


Other than all that - good job so far, and good luck on the journey ahead of you ;).

The page refreshes to get all the new shouts(it's 9 seconds) other then that, thank you. It doesn't try to resubmit data as well, because I have a check that stops it.

[TimeBomb]

The page refreshes to get all the new shouts(it's 9 seconds) other then that, thank you. It doesn't try to resubmit data as well, because I have a check that stops it.

Ajax will allow you to do a refresh on the shoutbox without refreshing the page.
The browser does try to resubmit the data. You can, and should stop that, using the PRG design pattern. Good luck.

Oh, and the PRG design pattern essentially works like this:

1. Submit the form to the current page. If the form is on index.php, have the form submit to index.php.

2. Validate the data on index.php. Make sure it is all okay.

3. If the data is validated successfully, redirect it to another page that handles the data, i.e. putting it in the database or what-not.

4. Redirect from the handling page back to index.php using

header("Location: index.php");

If the data is invalid, then they will still be able to resubmit it. But it doesn't matter, because it still won't get validated, and thus it won't be put in to the database.
If the data is indeed valid, then they will be put back at the original page, and if they attempt to go back/forward/refresh, it will work normally. They won't be able to get to the handling page, and there refresh won't ask them if they want to resubmit the data.

[Makarov]

Ajax will allow you to do a refresh on the shoutbox without refreshing the page.
The browser does try to resubmit the data. You can, and should stop that, using the PRG design pattern. Good luck.

Oh, and the PRG design pattern essentially works like this:

1. Submit the form to the current page. If the form is on index.php, have the form submit to index.php.

2. Validate the data on index.php. Make sure it is all okay.

3. If the data is validated successfully, redirect it to another page that handles the data, i.e. putting it in the database or what-not.

4. Redirect from the handling page back to index.php using

header("Location: index.php");

If the data is invalid, then they will still be able to resubmit it. But it doesn't matter, because it still won't get validated, and thus it won't be put in to the database.
If the data is indeed valid, then they will be put back at the original page, and if they attempt to go back/forward/refresh, it will work normally. They won't be able to get to the handling page, and there refresh won't ask them if they want to resubmit the data.

Thank you for the insight. I've been looking at AJAX, it looks pretty confusing to me but after a few trial and error sessions, I'm sure I can get it to work.

Also, Smiles are now done. Once I upload the new version to the test site you all can see it.

[TimeBomb]

Thank you for the insight. I've been looking at AJAX, it looks pretty confusing to me but after a few trial and error sessions, I'm sure I can get it to work.

Also, Smiles are now done. Once I upload the new version to the test site you all can see it.

I just recently started using AJAX myself for a project of mine. It was a bit confusing, especially considering how many different ways to implement it there are. Here is the basic function I am using to apply ajax.

function handle_stuff(m_varA, m_varB) {
    $.post("handle_stuff.php", {
        varA: m_varA,
        varB: m_varB
    }, function (data) {
        if (data.length > 0) {
            $(".div_class").html(data)
        }
    })
}

Here's essentially what this does...

First, the javascript function handle_stuff needs to be called. I do this through an onClick with a link, but you can also do it in many other situations.
The javascript function is called with two parameters. varA and varB.

Next, varA and varB are sent to handle_stuff.php as post variables. Thus, I can access them through handle_stuff.php with $_POST['varA'] or $_POST['varB'].

Then, the div with the class div_class is modified to display the data variable, which should be a string.
The data variable is filled with whatever is echo'd out by handle_stuff.php.
So, if I put at the end of handle_stuff.php:

echo 'RaGEZONE';

then the data variable in the handle_stuff javascript function will be RaGEZONE.

For me, I use a function very similar to this, so that when a user hits a plus or minus button, then a score is automatically updated and displayed on the same page - all without having to refresh the full page.

I hope this helped a bit. Once again, best of luck.

P.S. I am pretty sure the function I gave you requires jQuery.

[foxx]

use framework

[Makarov]

I just recently started using AJAX myself for a project of mine. It was a bit confusing, especially considering how many different ways to implement it there are. Here is the basic function I am using to apply ajax.

function handle_stuff(m_varA, m_varB) {
    $.post("handle_stuff.php", {
        varA: m_varA,
        varB: m_varB
    }, function (data) {
        if (data.length > 0) {
            $(".div_class").html(data)
        }
    })
}

Here's essentially what this does...

First, the javascript function handle_stuff needs to be called. I do this through an onClick with a link, but you can also do it in many other situations.
The javascript function is called with two parameters. varA and varB.

Next, varA and varB are sent to handle_stuff.php as post variables. Thus, I can access them through handle_stuff.php with $_POST['varA'] or $_POST['varB'].

Then, the div with the class div_class is modified to display the data variable, which should be a string.
The data variable is filled with whatever is echo'd out by handle_stuff.php.
So, if I put at the end of handle_stuff.php:

echo 'RaGEZONE';

then the data variable in the handle_stuff javascript function will be RaGEZONE.

For me, I use a function very similar to this, so that when a user hits a plus or minus button, then a score is automatically updated and displayed on the same page - all without having to refresh the full page.

I hope this helped a bit. Once again, best of luck.

P.S. I am pretty sure the function I gave you requires jQuery.

I found a better method.

var refresh = setInterval(
        function()
            {
                $('#ReloadThis').load('<?php echo Path.'/shoutbox.php'; ?>');
            }, 3000);

---------- Post added at 03:48 AM ---------- Previous post was at 03:47 AM ----------

use framework

Is that the name.. or are you telling me to just use a framework?

[Zen]

jQuery and AJAX are not languages.

foxx is telling you to use a framework.

some good ones with large support are ZEND, CakePHP and (my personal favourite) CodeIgniter.

[TimeBomb]

A framework is a good idea if you have time and are not a wildly experienced programmer.

Zen:
AJAX represents a group of tools, functions, and languages. Technically, you are correct, as it is not a specific language all on its own.

Like DHTML and LAMP, Ajax is not one technology, but a group of technologies. Ajax uses a combination of HTML and CSS to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads

[foxx]

a framework is a good idea even if you are the best fokken programmer