From 3130769ab4093f0a043cf54d9be778bf89001940 Mon Sep 17 00:00:00 2001
From: Akshat Bajaj <32318980+AkshatBajaj@users.noreply.github.com>
Date: Fri, 6 Oct 2017 19:58:29 +1100
Subject: [PATCH 1/2] Input Guide

How to display the content typed by the user.
---
 .../guides/code-examples/input/index.html.erb |   6 +
 .../guides/code-examples/input/title.html.md  | 153 ++++++++++++++++++
 2 files changed, 159 insertions(+)
 create mode 100644 source/guides/code-examples/input/index.html.erb
 create mode 100644 source/guides/code-examples/input/title.html.md

diff --git a/source/guides/code-examples/input/index.html.erb b/source/guides/code-examples/input/index.html.erb
new file mode 100644
index 0000000..283a75e
--- /dev/null
+++ b/source/guides/code-examples/input/index.html.erb
@@ -0,0 +1,6 @@
+<h3>input Guides</h3>
+<div class="list-group">
+  <% find_guides_in_category('code-examples/input').each do |f| %>
+    <a class="list-group-item" href="/<%= f[:uri] %>"><%= f[:doc_title] %></a>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/source/guides/code-examples/input/title.html.md b/source/guides/code-examples/input/title.html.md
new file mode 100644
index 0000000..063b2cd
--- /dev/null
+++ b/source/guides/code-examples/input/title.html.md
@@ -0,0 +1,153 @@
+<meta name="guide-title" content="Awesome Input guide" />
+<meta name="api-link-groups" content="input" />
+<meta name="api-link-functions" content="DrawText, EndReadingText, ReadingText, StartReadingText, TextInput" />
+
+# Building a blog using Splashkit
+
+## Handling Input
+The blog that we are going to build will have 3 items: a place to enter blog's title, a place to enter blog's content and a submit button.
+1. In the main method, create a new window
+    ```C#
+    Window blogWindow = new Window("BlogWindow", 800, 600);
+    ```
+2. Create a new C# file, say, `Blog.cs`
+3. In that, create properties to hold the X and Y location of title, content and submit rectangle.
+    For eg. 
+    ```C#
+    private int TitleX
+    {
+        get
+        {
+            return 100;
+        }
+    }
+    private int TitleY
+    {
+        get
+        {
+            return 40;
+        }
+    }
+    ```
+    
+4. Create properties to hold the height and weight of title, content and submit rectangle.
+5. Now, create a window variable
+    ```C#
+    private Window _BlogWindow;
+    ```
+6. Create the constructor of blog class
+    ```C#
+    public Blog(Window blogWindow)
+    {
+        _BlogWindow = blogWindow;
+    }
+    ```
+7. Now, create methods to return the rectangle for title, content and submit.
+    For eg.
+    ```C#
+    public Rectangle TitleRectangle()
+    {
+        Rectangle rectangle = new Rectangle();
+        rectangle.X = TitleX;
+        rectangle.Y = TitleY;
+        rectangle.Width = TitleWidth;
+        rectangle.Height = TitleHeight;
+        return rectangle;
+    }
+    ```
+8. Create properties to store the title and content of a post
+    ```C#
+    public string Title
+    {
+        get;
+        set;
+    }
+    public string Content
+    {
+        get;
+        set;
+    }
+    ```
+9. Create methods to draw title, content, and submit and call these methods from another method, say, `Draw`
+    For eg.
+    ```C#
+    private void DrawTitle()
+    {
+        _BlogWindow.DrawText("Title: ", Color.Red, SplashKit.FontNamed("Arial"), 20, 30, 40);
+        SplashKit.FillRectangle(Color.White, TitleRectangle());
+        SplashKit.DrawText(Title, Color.Black, TitleX, TitleY);
+    }
+    public void Draw()
+    {        
+        DrawTitle();
+        DrawContent();
+        DrawSubmit();
+    }
+    ```
+10. Now, switch to main method in `Program.cs` and create a `Blog` object.
+    ```C#
+    Blog blog = new Blog(blogWindow);
+    ```
+11. Create `readingTitle` and `readingContent` variable to indicate whether we are reading anything.
+    ```C#
+    bool readingTitle = false;
+    bool readingContent = false;
+    ```
+12. You want the `blogWindow` to loop while the window has not been closed. You can do this by using `CloseRequested` method of Splashkit.
+    ```C#
+    while (!blogWindow.CloseRequested)
+    {}
+    ```
+13. Within the loop you will need to:
+    1. Process Events
+    2. Now add an if statement to detect the left click within the title rectangle, You can do this by Splashkit's `MouseClicked` and `PointInRectangle` method.
+        ```C#
+        if (SplashKit.MouseClicked(MouseButton.LeftButton) && SplashKit.PointInRectangle(SplashKit.MousePosition(), blog.TitleRectangle()))
+    3. Within this if statement, call the `StartReadingText` method of Splashkit and change `readingTitle` variable to true.
+        ```C#
+        SplashKit.StartReadingText(blog.TitleRectangle(), "Enter Title");
+        readingTitle = true;
+        ```
+    4. Repeat the same for Content.
+        ```C#
+        if (SplashKit.MouseClicked(MouseButton.LeftButton) && SplashKit.PointInRectangle(SplashKit.MousePosition(), blog.ContentRectangle()))
+            {
+                SplashKit.StartReadingText(blog.ContentRectangle(), "Enter Content");
+                readingContent = true;
+            }
+        ```
+    5. Now add an if statement to end the reading text if user presses the return key.
+        ```C#
+        if (SplashKit.KeyTyped(KeyCode.ReturnKey))
+            {
+                readingTitle = false;
+                readingContent = false;
+                SplashKit.EndReadingText();
+            }
+        ```
+    6. Now clear the window and call the draw method in blog.
+        ```C#
+        blogWindow.Clear(Color.Aqua);
+        blog.Draw();
+        ```
+    7. Now add an if statement to detect the text entered by the user.
+        ```C#
+        if (SplashKit.ReadingText() && readingTitle)
+            {
+                blog.Title = SplashKit.TextInput();
+                Console.WriteLine(blog.Title);
+            }
+            if (SplashKit.ReadingText() && readingContent)
+            {
+                blog.Content = SplashKit.TextInput();
+                Console.WriteLine(blog.Content);
+            }
+        ```
+    8. Refresh the screen
+14. Build and run your program.
+15. It should open a window that accept the title and content of a post.
+16. Just click on title rectangle to write title and then press ENTER. To write content, just click on the content rectangle and press ENTER when you are done.
+To view the execution of the above program, goto https://www.youtube.com/watch?v=F0V3Y5Bb-Jg
+
+
+** [Akshat Bajaj](https://github.com/AkshatBajaj), 2017**
\ No newline at end of file

From e487956fe385ed6a6aa51d6ea42e5f3d0ee8803d Mon Sep 17 00:00:00 2001
From: Akshat Bajaj <32318980+AkshatBajaj@users.noreply.github.com>
Date: Tue, 17 Oct 2017 23:17:24 +1100
Subject: [PATCH 2/2] Database Guide

---
 .../code-examples/database/index.html.erb     |  6 ++
 .../code-examples/database/title.html.md      | 79 +++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 source/guides/code-examples/database/index.html.erb
 create mode 100644 source/guides/code-examples/database/title.html.md

diff --git a/source/guides/code-examples/database/index.html.erb b/source/guides/code-examples/database/index.html.erb
new file mode 100644
index 0000000..769a7ce
--- /dev/null
+++ b/source/guides/code-examples/database/index.html.erb
@@ -0,0 +1,6 @@
+<h3>database Guides</h3>
+<div class="list-group">
+  <% find_guides_in_category('code-examples/database').each do |f| %>
+    <a class="list-group-item" href="/<%= f[:uri] %>"><%= f[:doc_title] %></a>
+  <% end %>
+</div>
\ No newline at end of file
diff --git a/source/guides/code-examples/database/title.html.md b/source/guides/code-examples/database/title.html.md
new file mode 100644
index 0000000..c9a3c89
--- /dev/null
+++ b/source/guides/code-examples/database/title.html.md
@@ -0,0 +1,79 @@
+<meta name="guide-title" content="Awesome Database guide" />
+<meta name="api-link-groups" content="input" />
+<meta name="api-link-functions" content="OpenDatabase, HasDatabase, RunSql, QueryColumnForString, FreeAllQueryResults, FreeDatabase" />
+
+# Building a blog using Splashkit
+## Database Connectivity
+We have a window (https://github.com/splashkit/splashkit.io/pull/8) that accepts the title and content of a post, but what happens when you click on the submit button, pretty much nothing, as we do not have a database to store the contents entered by the user. We can use the SplashKit’s built in `SQLite3` database for persisting, and querying data.
+Important types:
+* `database` : The type which represents the actual database.
+* `query_result` : This is the type which represents the result of performing an action on the database. If the action performed on the database returns data (such as a select sql statement), then it contains the returned data.
+To store the title and content entered by the user:
+1. Create a new C# file, say, `ManageDatabase.cs`
+2. In the `ManageDatabase` class, create variables to refer to the database and to store the result of the query.
+    ```C#
+    private Database blogEntries;
+    QueryResult queryResult;
+    ```
+    
+3. Declare the constructor of `ManageDatabase` class which opens a database and creates a table to store the title and content of the post.
+    ```C#
+    public ManageDatabase()
+    {
+    blogEntries = SplashKit.OpenDatabase("BlogEntriesDatabase", "Database");
+    Console.WriteLine("Has Database: " + SplashKit.HasDatabase("BlogEntriesDatabase"));
+    queryResult = SplashKit.RunSql(blogEntries, "CREATE TABLE if not exists blog (title TEXT PRIMARY KEY, content TEXT);");
+    Console.WriteLine("Creating table: " + SplashKit.QuerySuccess(queryResult));
+    }
+    ```
+4. Now, declare a method to handle the submit call from user.
+    ```C#
+    public void Submit(Blog blog)
+    {}
+    ```
+5. In this method, run a SQL query to store the title and content of the post.
+    ```C#
+    queryResult = SplashKit.RunSql(blogEntries, $"INSERT INTO blog VALUES ('{blog.Title}','{blog.Content}');");
+    Console.WriteLine("Inserting " + SplashKit.QuerySuccess(queryResult));
+    ```
+
+6. Again, run a SQL query to query the database for the data which we just added.
+    ```C#
+    queryResult = SplashKit.RunSql(blogEntries, "select * from blog;");
+    Console.WriteLine("Selecting " + SplashKit.QuerySuccess(queryResult));
+    ```
+        
+7. Now, to see the data returned by the select statement, use Splashkit's `QueryColumnForString` method.
+8. If multiple rows of data are returned from the statement, use Splashkit's `GetNextRow method` to move to the next row, and perform your `QueryColumnForString` method again.
+    ```C#
+    do
+        {
+            string data = SplashKit.QueryColumnForString(queryResult, 1);
+            Console.WriteLine(data);            
+        } while (SplashKit.GetNextRow(queryResult));
+    ```
+        
+9. It is a good practice to free query results and database, you can do this with the help of Splashkit's `FreeAllQueryResults` and `FreeDatabase` method.
+    ```C#
+    SplashKit.FreeAllQueryResults();
+    SplashKit.FreeDatabase(blogEntries);
+    ```
+
+10. Now switch to main method in Program.cs, and declare an object of ManageDatabase
+    ```C#
+    ManageDatabase manageDatabase = new ManageDatabase();
+    ```
+11. Inside the `blogWindow.CloseRequested` loop, add an if statement to detect the left click on submit button.
+    ```C#
+    if (SplashKit.MouseClicked(MouseButton.LeftButton) && SplashKit.PointInRectangle(SplashKit.MousePosition(), blog.SubmitRectangle()))
+            {
+                manageDatabase.Submit(blog);
+            }
+    ```
+12. Now, you have a database that can store the title and content of a post.
+13. Build and run your program.
+14. It will open a window that accepts title and content of a  post. Just click on title rectangle to write title and then press ENTER. To write content, just click on the content rectangle and press ENTER when you are done. Now, when you click on submit button the Splashkit will store the title and content in the database. You can view the data stored in the database in the console.
+To view the execution of the above program, goto https://www.youtube.com/watch?v=F0V3Y5Bb-Jg
+
+
+** [Akshat Bajaj](https://github.com/AkshatBajaj), 2017**
\ No newline at end of file