Ajax and jQuery and fake Google Docs, Oh My!

Well, after a long absence of new posts, I'm back. First things first, some administrative issues: I'm changing the tone and format of the site. I noticed after my first two posts I was spending too much time writing up blog content, when the main focus of the site was supposed to be adding new features and apps for peoples to play around with. So, I'm shifting my focus to that, and changing the tone of my blog posts from objective detail-oriented tutorials to subjective anecdotes and opinions, with some brief updates on what I've been doing on the site and a focus on new features that I think are cool or am proud of. So, I'm sorry plethora of internet traffic who was looking for the other 3 parts of my 4 part database series, but that just ain't going to happen anymore. But the good part is that I imagine casual Justin is more fun to read than formal Justin, anyways (plus, it's more fun for Justin to write as casual Justin...I'll stop now).

Anyways, enough of that stuff. I love the Ajax Control Toolkit! I know, I'm probably preaching to the choir, but that's ok. I've had experience with the basic Ajax Controls, of course. The UpdatePanel and Timer were put to good use in my Ajax Chat Program. True, it definitely needs some work, and it will get some in the near future, but for what it is now, the Ajax controls worked great.

The toolkit though, was a huge help in my Document Constructor, the HTMLEditor specfically. My Document Constructor is a web-based Word Processor (think Google Docs, but not as awesome). Initally, I had planned to code the whole thing myself, which would include not only the ability to type and save stuff, but also to change the font, the font size, make text bold, and so on. I started with a ComboBox for changing font size, which worked pretty well. So that was one feature down, 47 to go. Then, my brain turned on: hey, there's this HTMLEditor control over here that I thought I'd heard of, that has like all of these features in it already. Sure enough, I added it to my page and got myself a nice Document editor. I added the creating, deleting, saving (and eventually printing [hopefully]) functionality; the actual text-editing is all that HTMLEditor. Mmmm, Ajax Control Toolkit :drools:

Check out more of my innane fanboy babbling after the cut

SQL Databases

Welcome to the first of my four part series on SQL databases! This part will focus on the creation of the database itself, as well as its tables, and how to connect to them. Please note that I use Visual Studio, so this post may be written towards VS users, especially the bits on database and table creation. However, the connection part of the article will be useful to any ASP.NET developer (I think)

Database Creation

Creating the database is easy enough. Just make sure you have an SQL server installed. SQL Express 2005/2008 is a good, free option.

1. In the Solution Explorer of Visual Studio, right click on App_Data, and select "Add New Item."
2. Select "SQL server database," and give it a name. Chose Visual C# as the language (unless you don't need to know how to connect to the database, which is covered using C# in the next section)

Databases created the above way should always work when they're being connected to on a local server. If you need to connect to a remote database, you may have to go about things a little differently. You'll want to navigate to server explorer, and then right click on "Data Connections." From there, select "Add a New Connection." A new screen will pop up. Here, you'll need to click "Change" next to "Data Source" to modify it.  If you're working with a remote SQL server, you'd select "Microsoft SQL Server" and the ".NET framework for SQL." In "Server Name," you'd type either the URL or the IP address of your remote server.

In the "Log on to server" section, choose whatever authentication type is set up on your remote server. In "Connect to Database," select your database that's been set up on your remote server. You shouldn't bother with "Attach a database file" unless you have to; it likely won't work.

Table Creation

1. In Server Explorer, expand the datase you just created. Right click on Tables, and select "Add New Table."
2. Now you can set up your table (these next 3 steps can be performed simultaenously). Name your columns in "Column Name." For example, if you're creating a table that stores login informtion (guess what the next two posts will be on? hint hint), you could enter "username," "password," and "email" into "Column Name."
3. Enter DataTypes that correspond to the columns you just named. Going into all the different types is beyond the scope of this article, but the general format is datatype(number of characters). varchar is a datatype that is common (it allows a varying number of characters); for our login information table example, we may add a datatype of varchar(20) to both username and password, meaning that information in those columns can have between 0 - 20 characters in them.
4. Uncheck the "Allow Nulls" column if you don't want to allow nulls. If you allow nulls it basically means that when you're filling out a row in the table, you can skip that box. If you don't allow nulls, then that box must be filled out.
5. Select a primary key. The primary key is the column that can uniquely identify each row, since it has no repeating values or nulls. In our example, we'll choose username. Right click in the area to the left of the row you want, and choose "Select Primary Key."
6. Add additional constraints if necessary. We'll go over that in a future post.
7. Add data to your table by right clicking on it in the Server Explorer and selecting "Show Table Data." We won't be getting in that here, since we're going to let our users enter the data. And don't forget to save!

Check out how to connect to your database after the cut

Styles with CSS

My first post will touch on the topic of how to style your web page using CSS.

Containers

The first hurdle that I came across when I first started designing websites was getting content to display neatly on the page, without the need to scroll, or without having everything crunched over to the left when maximzed. The answer is to create a container to center everything.

#containerExample
{
margin:0px auto;
position:relative;
width:300px;
min-height:100%;
background-color:#000000;
padding-left:5px;
padding-right:5px;
}

I won't get into what exactly each of these lines do. If you don't know what they are, check out w3schools.com for some great information. The most important line here is "margin." Setting margin to 0px auto is what will cause your content to be horizontally centered in your browser. Also of note is "width." You want to choose a width that reduces the amount of empty space on either side, but also one that doesn't cause content to horizontally flow off of most people's screens. It's a balancing act. The width of the container on this site is 900px. With the high resolution that most computers run at these days, that seems like a pretty safe width, though feel free to adjust it based on how you see a width of 900px display on this site.