[SOLVED] Help me to understand web development

[Elite]

Hi all

Can someone please explain me the process of web development? I am an absolute nooobie in this area and I have NO idea whatsoever about website development or programming. I really need to know what HTML, XHTML, PHP ASP.NET, CSS, Joomla, MySQL, OS Commerce etc is. I know its not possible to learn everything in one day but its ok I cant go slow on this. if you can refer to any web link or an ebook that would teach me these right from the basics (like what a platform/framework/server-side/client-side scripting etc is) I would really really appreciate your help.

Thanks

[wmorri]

Hi,

Wow you really want to learn a lot here. I would recommend that you have a look at w3schools.com. This is a free site that has tutorials on most of the stuff that you listed.

I can break it down a little more for you. HTML, XHTML, and CSS all are in one category. They are used to write webpages. This is where the source comes from.

Another category is server side scripting languages those include PHP, ASP.NET. These are languages that involve the webserver showing a user a webpage. As supposed to browser side languages such as javascript. PHP, and ASP.NET are languages that need to be run on a webserver, such as Apache, or IIS.

Mysql is a server that is used for databases. It is free and if you want to read about it go here. Joomla is CMS or Content Managment System. This takes all of the information that you would normal right and help your develop it in one program instead of many different programs.

This is only a very brief idea of what web development is. There is years of stuff to learn depending on what it is that you want to create.

Cheers!

[Elite]

LOL

thanks for the reply and the resources wmorri. No I don't actually want to learn all these and design a programme or a super complex website. I actually need to know how all these connect together. Or what the "process' involves.
For example, referring to your post, i understand that their is one client side/browser-side language such as JavaScript and a server side language like ASP.NET. So does a website require to be written in both languages, one for the hosting server to store the website information and one for the browser to decode the information?
Don't know if my question makes any sense but that is what i mean by the "process'. I got a job for a website developing company and I market their services. So I am actually doing some homework and learning these technical stuff to help do a better job.

[Nicitel]

Hello Elite, I will try to help you.

So all what you need is to know how the website works? And what processes has to be done when you type for example http://www.example.org/, or this one http://www.techsupportforum.com/, to that point you can actually see and read it? From technical point of view? And what they are, what connections are between them?
If not, then maybe I didn't fully understand your question. My English isn't best yet. But I assume that I did and you are patient, so we can continue.

I will try to link each item to the wikipedia, so if you want to know more, just click.

Ok, so we have things like:

• web browser - IE, FF, Opera, Chrome etc.. you know these. They are programs that sends requests, like what page I want to see, and when they get a response, they will show it in formatted form.
  -
• markup language - this is the HTML/ XHTML - it's use is to define what information has what purpose, so the Web Browser (browser in short) can handle it properly.
  (Like the website is saying to your browser what is what, so the browser can then make some action as a response: "This is a comment." - "Ok, I won't show it.", or "Heading incomiiing." - "Ok, I will make it big and bold.".)
  -
• style sheet language - CSS falls under this category, it defines how the defined information by HTML/XHTML will actually appear on screen.
  (Like "Make all headings thin, red, but twice as big, and make them blinking." - "Ok.".)
  -
• client-side scripting - that's the JavaScript - it is a scripting language, with JavaScript (JS in short) you can make your website more dynamic, with it you can make website easier to use and thus more comfortable. For example, this word editor in which I am writing this mess runs on JS, when I clicked this picture of smile, JS inserted it for me so I'm happy that I don't have to actually write all the formatting stuff and thus JS is making room for more quality answers in same time with less stress, so the World is again better place for living.
  With JS, you can't access the web server, but with Ajax you can get responses from server-side scripts, so you can change the content of website without having to reload it.
  -
• server-side scripting - PHP, or ASP, or Perl, or Java, or Ruby etc etc, with server-side scripting you can dynamically create a page that contains all desired informations and none of the unwanted, based on the user's actions. For example, web forms, like the one that I'm writing into right now, are after submitting to the web server processed by the server-side script, and when you come back, you can read it - because the script that created this page a moment ago, inserted my response to this forum thread.
  -
• relational database management system or RDBMS or just database - MySQL, Oracle, PostgreSQL, MS SQL Server etc.. , in web, almost all data or informations that the server-side scripts are using, are stored in databases like these. They usually contain a wide range of informations - from usernames and passwords, email adresses, settings, through articles, messages to logs, etc for some community based sites, e-shops would probably storing more informations like products and orders, and so on. The server-side scripts then just reads or alters (inserts, removes) any data that they want.
  -
• web server - Apache, IIS etc, this program (which runs non-stop on remote computer) delivers requested data and operates via the hypertext transfer protocol (http in short). If a user want to "go" to the "http://www.example.org/about.html", his web browser will send a request to the web server that is associated with this domain name ("www.example.org" in our case) that the user wants the page "about.html", and if all goes well (stuff like the page really exists, or the user is authorized to access the file) the server then sends back content of this page. Server-side scripts runs on web servers. If you want "http://www.example.org/about.php", you are calling a PHP script. Server then runs this script and sends back the output. But, if you want "about.html" and not ".php", it may run the ".php" or whatever script actually, if it is configured to do so.

So, that's the basics! Lets have some fun now!


Ok, so I have a web-browser on my computer, and I want to go to this web address "http://www.arrivals_from_outer_worlds.org/en/forum/what_if_the_aliens_really_exists-topic142249.html" (don't ask why, I have my own reasons!!!11!1!!1)

So, I did and it is a nice flashy site that allows it's users to share their experiences about various alien-abductions. On the right side is a menu, and when I point my mouse cursor at one item, it jumps out new sub-menu with new menu-items, so if I ever wanted to go somewhere else, it would take me less clicks. "Cool" I say. I've just registered here using all my personal data (hello facebook fans) and now I'm ready to contribute my own experience to this nice thread. So I click the Reply button, it shows me word editor but the browser did nothing. After saying "what" I'm looking on it, it is pretty simple but usable, thus I started putting my thoughts on the net so anyone can read it. It is pretty easy, because when I want some text red, I have to just click on the "Make red" button, there is another one for pink, and it works too. When I finally click the Submit button, I am shocked for the first time on this site. It is really great! - A pop-up window warned me that I accidentally forgot to fill the required box "Where I am and what I am doing right now?". I'm so stupid! So I write "home, writing" to the box, which is red now (it was blue), and during the time my browser sends my contribution to this awesome forum, I'm wondering if this can beat that twitter thing. It's done, I check if my post is really there, then I log off.

That's the story. Now the boring technical stuff.

The long version:

The address looks like this:
http:// www.arrivals_from_outer_worlds.org/ en/forum/what_if_the_aliens_really_exists-topic142249.html

When I put this address to the browser, the browser from my local computer (client) sent the request to a remote computer (server) via http, so the web server can catch it. The web server is Apache, and this one is configured to internally redirect all pages in the domain name (red color) to one script, aliens.php. But that I don't know, I can't see the Apache configuration. So, maybe I could think I'm calling a simple static .html, but actually I called the PHP script. Web server also provided a full path (green color) to the script so script know which content the created page has to contain.

After the script has established connection to the MySQL database, it has realized that the (client)browser did not sent him any data related to my user's session. So it make new one for me, tagged as public, (therefore I can't post comments yet - that's the site's rule) and then inserts it into the database. It also inserts identification number of that new session into my browser's storage on my local computer - I have a new cookie! (This cookie will the script read every time I called it, so it will know that I am calling it and no my neighbour, for example, so I don't have to log-in every time I (re)load this site.) Then the aliens.php script handle that path it got from Apache. It contains many informations, like the used language for user-interface - "en", section - "forum", specifically the "topic" labelled by the id "142249". As you can see, the script didn't needed (but for me it is the most important thing) the title of that topic, it is here because it is more comfortable for us, humans, and it is good for SEO too.

Ok, now the script has all the input data that it needs, with session already created. It now reads from database all posts (and some data from it's authors) related to that topic id 142249. Then it will process the data - like sorting them, adding (X)HTML tags, creating links to user profiles and other actions. At the end, it put this "body" into a slightly modified (X)HTML template (with changed page title, for example). This template contains all the CSS and JavaScript links, static content like header, menu, footer etc, so the source code of desired page is now complete. Then the web server send this source code to my browser located on my computer.
Browser will read the source code and follow and download all linked CSS, JS, pictures and other stuff, so it has all the data that the page contains. It then loads all JS scripts, if there is an execution block, it will be executed. The (X)HTML+CSS code defines how all the elements on page will looks like (background is white, font color is black, header is an image, posts are aligned to left, while the authors are centered, menu is using other font that the posts, etc..) and where they are located (the header can be the last thing in source code, but if the CSS tells the browser that the header must be at the top of page, it will be).
Some elements, like the menu links, contains in the (X)HTML some attributes that are connected to the JavaScript. When I moved my cursor to the menu link, that link has defined an "onmouseover" event with linked JavaScript code, which I activated and then the called JS showed me sub-menu by simply changing some CSS attribute which prevented me to see it. When my cursor left the active zone, I activated another event "onmouseout" which did the same, but this time the changed CSS attribute was again preventing me to see that submenu.
When I wanted to respond to the topic (after registration, of course), I activated another JS function, but this time that JavaScript with a little help from Ajax contacted the server script aliens.php, which sent back new (X)HTML source code related to my action, and then still that JavaScript inserts this new code into the page, thus my browser will try to render it by applying all the steps above for this piece too.
Basically all buttons, areas, etc that can "do something" are linked to some JavaScript execution code. The word editor would not be very functional without JS! That check that warned me and then changed color of the related box, would without JS work only after sending my response back to the server.
If there is a change, it's probably JS. CSS has some capabilites in this area too, like hover effect - when your cursor is hovering on some element, it may change color or other defined properties like background-image, but the difference is that JavaScript alters the source code, the CSS don't.

The short version:
Web browser sents request to a web server, which pass that request to the script writed in server-side language, the script will (on the basis of that request) create (with data obtained from the database) the source code of page writed in markup-language ((X)HTML) with linked all the client-side scripts and style sheets, then sends it back throught web server to the browser where is the source code (which is a plain text) interpreted, executed and rendered.


This was an example, there are soo many different ways how the web apps can work..
And please note that I did not mention Flash or Silverlight, because I have no idea how they works, I newer created anything in them. There are some sites completely created in these, but I don't like them, because you have less control of that site and you are completely dependent on designer of that site - if he is bad, the site is unusable (for example, in (X)HTML you can choose, if you want to open a link in actual tab, new tab or new window, etc. but in Flash you don't even know where is that link pointing to!). Search engines don't like them too, what I read.

Yes and this alien site has deliberately wrong second-level domain, so it won't work


Joomla! and the osCommerce are complete web applications that are based on technologies mentioned above.

Joomla! is the Web CMS (content management system) that allows you to set up, publish and maintain a webpage with very little knowledge about technical web stuff
And that osCommerce is some equivalent for eshop, dunno, read the wiki, I newer used it.


Ok that's all, I hope I was usefull, and sorry again for my English, I'm still learning and I hope I will someday be that good like you guys.

[Elite]

Nicitel

you're a genius! That has helped me a lot. And your English is very good. I dont know why you are worried. Anyway.

THANK YOU SO MUCH

(there! I think I just made use of some CSS and JS, right?)

[ahmorrow]

Originally Posted by Nicitel

Hello Elite, I will try to help you.
...(appended to help save people scrolling time)...
Ok that's all, I hope I was usefull, and sorry again for my English, I'm still learning and I hope I will someday be that good like you guys.

Nice summary Nicitel. I couldn't have done better myself.