[RESOLVED] what language to learn for webprogramming???

[bodylojohn]

Hello,

I am a very motivated windows programmer and I am using VB.NET for over 6 years now and still learning.

Now I want to venture into webprogramming.
I want to build web applications (not websites).

What is the best language to learn?
I will have to choose between ASP.NET (with SQL server) or PHP (with MySQL).

I allready now a great deal about VB.NET.

What do you guys recommend for building webapplications?

I especially want to build applications where users can search data that will be displayed in a grid.
And add, delete and update details..

Thanks in advance,.....

[szlamany]

I personally use ASP.Net for the backend - with WEB METHODS and not the traditional ASP.Net GET/POST/Partial POST-BACK garbage...

I then manage the APP in the browser with Javascript - using the jQuery library (really great library that helps with cross-browser issues and give a really professional look to your web app).

The javascript in the browser uses Ajax to talk to the server WEB METHODS and then uses jQuery to re-draw the parts of the DOM needed to manage the web experience.

The pages never re-load - no BACK or FORWARD action - just a perpetually running web app that uses AJAX async calls to get data and push data...

I use SLICKGRID for a grid - really, really cool.

I spent two years doing tradional ASP.Net pages - they are really a poor answer to creating a robust web experience for your users.

[bodylojohn]

I personally use ASP.Net for the backend - with WEB METHODS and not the traditional ASP.Net GET/POST/Partial POST-BACK garbage...

I then manage the APP in the browser with Javascript - using the jQuery library (really great library that helps with cross-browser issues and give a really professional look to your web app).

The javascript in the browser uses Ajax to talk to the server WEB METHODS and then uses jQuery to re-draw the parts of the DOM needed to manage the web experience.

The pages never re-load - no BACK or FORWARD action - just a perpetually running web app that uses AJAX async calls to get data and push data...

I use SLICKGRID for a grid - really, really cool.

I spent two years doing tradional ASP.Net pages - they are really a poor answer to creating a robust web experience for your users.

Dear szlamany...

Thanks for the usefull reply.
Do you know where i can find some tutorials on the subjects you describe???

Thanks in advance...

[szlamany]

For jQuery - read this book - it was a great tutorial - I still use it as a reference

http://www.manning.com/bibeault2/

Slickgrid - check out the examples...

https://github.com/mleibman/SlickGrid/wiki/Examples

Learning how to write Javascript and work the browser - that's a learning curve - but I did it and I came from a VB background (javascript is very C-like in syntax).

Javascript is a really cool language actually - I love programming in it now. It's a prototype-based language - so it's very different then VB with classes and such

http://en.wikipedia.org/wiki/Prototype-based

Good book on JS - O'Reilly - Javascript: The Good Parts

http://shop.oreilly.com/product/9780596517748.do

The simple part for you will be the ASP.Net backend web methods - I code those all in VB.Net since VB is my home-language (so to say)...

Search the javascript section of this forum for my name and you will find several links with images of my web app - like this one...

http://www.vbforums.com/showthread.p...ian&highlight=

That's what jQuery gives you for a professional look

[bodylojohn]

szlamany thanks for this very detailed information.

With what part can I start so I get the best foundation?

[Niya]

Not to hijack your thread or anything but I've always been curious. What is jquery really about ? I mean I've read up on it but my limited understanding of web programming in general renders me unable to fully grasp what problem its meant to solve. I mean like every time I read up on something jquery could do I always figure, "I can use normal JavaScript to do that"....what is the big deal about it anyway ?

[bodylojohn]

Hi Niya...

We will let this post in because its a very interesting question for the beginning web programmer.

[bodylojohn]

Hello szlamany

I looked at slickgrid but, even though there is a lot of documentation, I cant find an installationguide.

Could you please tell me where i can find info on how to use slickgrid?

Thanks!!!!

[szlamany]

Ok - here's a good example of jQuery making my life way easy. I'm currently working on a Purchase order entry screen. I did not want to use a grid for this as it needs some extra functionality that's hard to get in a grid.

First screen shot in the image shows two lines of the PO - when you walk off the end of the 2nd line a 3rd line is created. This is not a grid, so the DOM needs to be instantly modified for the user. That is the second screen shot in the attached image.

At the end of each row is a cool-little button that splits the row of the PO into several lines - as you click it it opens up new lines - and hides the button so you can't click it again. That is the third screen in the image. The split lines appear with AA, AB, AC (I'm going to hide that when I'm done with this code - just there for debugging purposes now). They are DISABLED textboxes - as you see they are greyed out.

So - first I need an event to fire when a certain field gets a FOCUS OUT - jQuery to set that up is this

$('.acs-input-field').live('focusout', focusoutField);

That is a LIVE event - meaning I can add new fields to the DOM that have the class ".acs-input-field" and they automagically get the event assigned. I only execute this line of code ONCE - when the DOM READY moment happens. That's really cool. I never have to worry about creating a new field on the screen and forgetting to assign the events it needs to function!

Now - this is the FOCUSOUT function - the one that adds the NEW rows as you walk off an existing row

        function focusoutField(sender) {
            var wesAWC = $(sender.target);
            var strRow = "";
            var intRow = 0;
            var strNew = "";
            var wesNew = [];
            if (wesAWC.hasClass("acs-newrow")) {
                strRow = findClass(wesAWC.parent(), "acs-rownumber");
                intRow = parseInt(String(strRow).replace("acs-rownumber", ""), 10) + 1;
                strNew = "acs-rownumber" + intRow;
                wesNew = wesAWC.parent().siblings("." + strNew);
                if (wesNew.length == 0) {
                    wesNew = wesAWC.parent().clone().removeClass(strRow).addClass(strNew).addClass("acs-clone"); //.appendTo(wesAWC.parent().parent());
                    wesNew.find(".awc-POLines,.awc-POLines1").removeAttr("disabled");
                    wesNew.find(".acs-input-field").val("");
                    wesNew.appendTo(wesAWC.parent().parent());
                    wesNew.children().first().focus();
                }
            }
        }

That's javascript calling jQuery methods. Note the IF statement about hasClass("acs-newrow") and then look in the attached image - and the HTML. See acs-newrow down on the awc-POLine6 row? The trick to jQuery is that you put classes on things that you want to behave a certain way and then you can do really uber-cool stuff with those classes. Look back at the code above - see the line that starts with wesNew = wesAWC.parent().clone()... That line and the next few lines are all that is needed to CLONE the row - add a class that labels the row (acs-rownumber3 for instance) - add a class that says it's a clone. Then it finds two elements in the clone - the clone isn't even in the DOM yet and jQuery can manage it - and it clears the values in those input elements. Then it appends it to the parent - and then it magically sets the focus to the first child element in the clone item it just dropped into the DOM.

Yes - you could do that with javascript alone. And you would have to worry about all the browser differences that can burn you. jQuery removes that nightmare.

Now - obvious problem is that when the user calls up a new PO - or starts a new entry - you somehow have to get the DOM back to a single row again.

        function p_fillEditPanel(objPanel, strNewId, blnRefill, repeaterInfo, repeaterCur) {
            var wesEP = $("#" + strNewId);
            var wesPOClone = wesEP.find(".acs-clone"); //.remove();
            if (wesPOClone.length != 0) {
                wesPOClone.remove();
                wesEP.find(".acs-panel-btn-split").show();
            }

That's cool code! Since I labeled each row that was cloned with a class of acs-clone I can remove all that HTML from the DOM instantly with just a couple of lines of code.

wesEP - wes means "wrapped element set" to me - jQuery always returns an array of elements that are to be worked on. So wesEP is a pointer to the EDIT PANEL I am working on in the DOM. wesPOClone is an array of elements that have the ACS-CLONE class set - easy to find with .FIND(). Then a single line of javascript code - wesPOClone.remove() - removes all that HTML. And of course I have to re-show the SPLIT button in case they used that and it was .HIDE hidden...

jQuery makes DOM manipulation really easy. If you want to make a perpetual page - that uses ajax - and modifies the DOM as data comes flying in - jQuery is the tool that makes it work for you.

[bodylojohn]

Thank you very much szlamany...
But this is very advance.... Ik hope i will get to that level someday.

I would firstely like to start by showing data in the slickgrid.

Because the slickgrid is exactly what I need.

How can I fill the slickgrid with data?

Thanks again for all your help

[szlamany]

It's as easy as this

var slickgrid = new Slick.Grid(container, rows, columns, options)

https://github.com/mleibman/SlickGri...etting-Started

[bodylojohn]

Thanks again..

Do i have to install something?

[szlamany]

Yes - you go to GITHUB or wherever liebman hosts his source and you download the .JS files.

Go to the first example and VIEW source in your browser - that will show you the dependencies...

Have you ever written any web code using javascript??

[edit] - here is the source from the browser...

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid example 1: Basic grid</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>basic grid with minimal configuration</li>
      </ul>
    </td>
  </tr>
</table>

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</body>
</html>

[/edit]

[bodylojohn]

Thank you very much again..

To be short...NO.. I have never ever written any webcode with JSCRIPT.

As I said I want to learn how to built web applications.

So I have to start somewhere ;-)

[Niya]

Ok - here's a good example of jQuery making my life way easy. I'm currently working on a Purchase order entry screen. I did not want to use a grid for this as it needs some extra functionality that's hard to get in a grid.

First screen shot in the image shows two lines of the PO - when you walk off the end of the 2nd line a 3rd line is created. This is not a grid, so the DOM needs to be instantly modified for the user. That is the second screen shot in the attached image.

At the end of each row is a cool-little button that splits the row of the PO into several lines - as you click it it opens up new lines - and hides the button so you can't click it again. That is the third screen in the image. The split lines appear with AA, AB, AC (I'm going to hide that when I'm done with this code - just there for debugging purposes now). They are DISABLED textboxes - as you see they are greyed out.

So - first I need an event to fire when a certain field gets a FOCUS OUT - jQuery to set that up is this

$('.acs-input-field').live('focusout', focusoutField);

That is a LIVE event - meaning I can add new fields to the DOM that have the class ".acs-input-field" and they automagically get the event assigned. I only execute this line of code ONCE - when the DOM READY moment happens. That's really cool. I never have to worry about creating a new field on the screen and forgetting to assign the events it needs to function!

Now - this is the FOCUSOUT function - the one that adds the NEW rows as you walk off an existing row

        function focusoutField(sender) {
            var wesAWC = $(sender.target);
            var strRow = "";
            var intRow = 0;
            var strNew = "";
            var wesNew = [];
            if (wesAWC.hasClass("acs-newrow")) {
                strRow = findClass(wesAWC.parent(), "acs-rownumber");
                intRow = parseInt(String(strRow).replace("acs-rownumber", ""), 10) + 1;
                strNew = "acs-rownumber" + intRow;
                wesNew = wesAWC.parent().siblings("." + strNew);
                if (wesNew.length == 0) {
                    wesNew = wesAWC.parent().clone().removeClass(strRow).addClass(strNew).addClass("acs-clone"); //.appendTo(wesAWC.parent().parent());
                    wesNew.find(".awc-POLines,.awc-POLines1").removeAttr("disabled");
                    wesNew.find(".acs-input-field").val("");
                    wesNew.appendTo(wesAWC.parent().parent());
                    wesNew.children().first().focus();
                }
            }
        }

That's javascript calling jQuery methods. Note the IF statement about hasClass("acs-newrow") and then look in the attached image - and the HTML. See acs-newrow down on the awc-POLine6 row? The trick to jQuery is that you put classes on things that you want to behave a certain way and then you can do really uber-cool stuff with those classes. Look back at the code above - see the line that starts with wesNew = wesAWC.parent().clone()... That line and the next few lines are all that is needed to CLONE the row - add a class that labels the row (acs-rownumber3 for instance) - add a class that says it's a clone. Then it finds two elements in the clone - the clone isn't even in the DOM yet and jQuery can manage it - and it clears the values in those input elements. Then it appends it to the parent - and then it magically sets the focus to the first child element in the clone item it just dropped into the DOM.

Yes - you could do that with javascript alone. And you would have to worry about all the browser differences that can burn you. jQuery removes that nightmare.

Now - obvious problem is that when the user calls up a new PO - or starts a new entry - you somehow have to get the DOM back to a single row again.

        function p_fillEditPanel(objPanel, strNewId, blnRefill, repeaterInfo, repeaterCur) {
            var wesEP = $("#" + strNewId);
            var wesPOClone = wesEP.find(".acs-clone"); //.remove();
            if (wesPOClone.length != 0) {
                wesPOClone.remove();
                wesEP.find(".acs-panel-btn-split").show();
            }

That's cool code! Since I labeled each row that was cloned with a class of acs-clone I can remove all that HTML from the DOM instantly with just a couple of lines of code.

wesEP - wes means "wrapped element set" to me - jQuery always returns an array of elements that are to be worked on. So wesEP is a pointer to the EDIT PANEL I am working on in the DOM. wesPOClone is an array of elements that have the ACS-CLONE class set - easy to find with .FIND(). Then a single line of javascript code - wesPOClone.remove() - removes all that HTML. And of course I have to re-show the SPLIT button in case they used that and it was .HIDE hidden...

jQuery makes DOM manipulation really easy. If you want to make a perpetual page - that uses ajax - and modifies the DOM as data comes flying in - jQuery is the tool that makes it work for you.

Thanks....That makes quite a lot of sense. It seems you can eliminate a whole lot of tedious boilerplate associated with DOM interaction. These real prize though is the elimination of cross browser issues. When I was dabbling in ASP.Net a year ago, cross browser compatibility was the most frightening aspect of Web programming.

I will return to the domain of Web programming someday and I will definitely look into jquery. Although, I must say it seems a little intimidating. However, the way you're using it seems to imply that it was made to embody a functional style of programming in similar vein to functional LINQ and hopefully, that will make it easier to digest. Thanks for the explanation

[techgnome]

JQuery is just ONE of many AJAX libraries out there. It just happens to be the most commonly used one. Yes, it takes care of the boilerplate interactions of the DOM and also deals with the variations in the browsers. It's probably not all that different from .NET where you have a common framework that you develop against, and some engine layer takes care of the thread counting on the nuts & bolts.

-tg

[szlamany]

It just happens to be the most commonly used one.

Which is a great reason to use it - the amount of "free" and powerful UI widgets - like that SLICKGRID - make it a winner.

And I wouldn't really call it an AJAX library - AJAX is just one of the methods available in the library. It's the dozens and dozens of DOM manipulation methods that make it powerful.

AJAX is nothing if you cannot deal with the RETURN DATA in a robust fashion.

This link is for jQuery UI widget page - spend some time here and see how powerful it is.

http://jqueryui.com/

Now - go to this page - themeroller - click on the GALLERY button. This is a complete set of CSS styling that is also "editable" by you from this page - pick a theme - then click on the EDIT button.

http://jqueryui.com/themeroller/

The jQuery community is one of the most important aspects of using it, imo

[szlamany]

It's probably not all that different from .NET where you have a common framework that you develop against, and some engine layer takes care of the thread counting on the nuts & bolts.

Just want to clarify this point a bit.

It's a browser library - not a backend library.

Being able to stay in the browser - never making a postback to the server - and still get DOM changes happening - lightening fast. That's cool.

I spent a couple of years doing traditional ASP.Net pages. Asking the server to help me alter a update panel in the browser is taking a long trip around to do something that you can do locally in the browser with Javascript/jQuery...

[Niya]

This link is for jQuery UI widget page - spend some time here and see how powerful it is.

http://jqueryui.com/

Wow.....I never knew about this. I always figured when I moved to Web development, I'd have to write all those things from scratch, which would have been immensely fun but wouldn't be good if I have to meet deadlines. It can really get tedious creating complicated logic in a dynamically typed language like JavaScript. It just makes it so difficult to debug.

[szlamany]

I write none of that stuff from scratch - the accordions and autocompletes - the tab panel I use - all part of the library. And all respecting the themeroller so I can change up the color theme without writing a single line of CSS.

My web app - at this point - is 7000 lines of javascript code. That same web app runs at lawyers offices, labor unions - town halls. Same app.

The app gets the "names" of buttons from the database - the names of the column headings - all of it is generated via ajax calls at runtime. The names of the accordions - all at run time. The content of the accordions - all downloaded via ajax when the page boots up initially. All stored in the DOM and reused if need. The ACCOUNT LOOKUP is a jQuery UI AUTOCOMPLETE - and when the PO screen replicates the ACCOUNT # on the TAB it sources the data to what was loaded when the DOM booted up initially.

Same app - running at all my clients sites. That is true code-reuse. Granted my edit panels - like what I posted up above - are HTML hardcoded for that one single business purpose. But they sit in a hidden pool of html and the jQuery drops them into place. Eventually I will send those HTML-panels when the app boots with some ajax calls - and actually stored them either in my database or a folder on the server - wherever it might be easier for the web method to get to them.

Even the icons on the jQuery BUTTONS are part of the boilerplate

http://www.petefreitag.com/cheatsheets/jqueryui-icons/

I just added graphing and plotting to the app - using jqPlot - a free library of graphing tools. Adding that to the app and now all my clients have graphing ability of any slick grid they want.

http://www.jqplot.com/tests/rotated-tick-labels.php

[Niya]

That looks rich man, like a desktop application. Would it be accurate to say that Jquery is the backbone of your entire UI ?

[szlamany]

Yes - without it that would not be possible. Just styling the buttons like that - effortless.

I got disillusioned with ASP.net - when I couldn't get repeaters and update panels to be bug-free in a stupid attendance screen for teachers to use (the top line wouldn't refresh like the other lines!)...

Then I read that manning book - I mentioned in post #4 - "jQuery in Action". Didn't know a lick of javascript at that time.

Jumped head first into this and would never look back again.

[Niya]

Ah cool. I will remember this thread and your strong endorsement when I decide to tackle web programming again

[bodylojohn]

And I still don't know where to start ;-)

[szlamany]

And I still don't know where to start ;-)

Post #11 that I made in this thread gave you a link to getting started with the slick grid.

Post #13 that I made in this thread actually gave you the page source - viewed from my browser - of the simple example of the grid. You need to get a web probject started in VS and get that type of page working.

That's a lot to chew off and get started from one thread that you posted here - but that's the hurdle you must overcome.

At any rate - get started - when you hit a road block - post a new thread (in the javascript or jquery section of this forum) and ask that small question and hopefully we can all help push you along.

This thread has pretty much reached the end of it's life...

[bodylojohn]

Thank you very much SZLAMANY..

I will follow your advice and just jump in using your links....

Thank you very much for your patience!!!

[szlamany]

You are very welcome - and good luck