Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,198,523 members, 7,968,446 topics. Date: Monday, 07 October 2024 at 07:29 AM |
Nairaland Forum / Science/Technology / Programming / Android Quiz Application With Json Parser, Php And Mysql Database (9464 Views)
Php Quiz Application With Radio Button And Checkbox (jquery And Php/sql) / Most Used Mysql Database Functions / List Of All States With Local Governments In Nigeria In JSON, PHP And SQL Format (2) (3) (4)
Android Quiz Application With Json Parser, Php And Mysql Database by nollyj: 3:28pm On Apr 09, 2015 |
In this tutorial we are going to learn how to create an android quiz application with Json parser, Php and Mysql database. This is going to be a long tutorial so relax as we take the journey together. Most of the concepts you will see here has been covered in some of my previous tutorials and I will suggest you read these two tutorials before you continue - How to Parse JSON in Android (http://inducesmile.com/android-tutorials-for-nigerian-developer/how-to-parse-json-in-android-example/) and Android Login and Registration with Php and Mysql (http://inducesmile.com/android-snippets/android-login-and-registration-with-php-and-mysql/) We are going to store our quiz questions and answers in Mysql database which can be local or remote. One advantage of using this concept in android quiz application is that it will afford you the opportunity to add and edit quiz questions and solutions with the need to update your application. Android quiz application can also be achieved by storing the quiz questions and solutions using android SQLITE database. In this case, the application will not require internet connection to access the database. If you do not know much about Php and Mysql, kindly read it up w3school.com. Before we start with the detailed instruction, it is important to know that we will first of all download and install a web server in our system. I am going to use WAMP server but feel free to use whatever web server you are familiar with. The detail instruction on how to install WAMP can be found on their website. With the web server installed, start your web server and go to PhpMyAdmin. We will create a new database called quiz. In our created database, we will create a single table called quiz_questions. The below script is used to create our users table. CREATE TABLE IF NOT EXISTS 'quiz_questions' ( 'id' bigint(20) NOT NULL AUTO_INCREMENT, 'question' varchar(300) NOT NULL, 'possible_answers' varchar(300) NOT NULL, 'correct_answer' int(5) NOT NULL, PRIMARY KEY ('id'), UNIQUE KEY 'question' ('question') ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; The next step is to create our Php project structure. I will make use of Aptana IDE for Php and Mysql development but feel free to use whatever IDE you like the best. Create a folder called Android_Quiz inside the www folder of your web server. Inside this folder, create another folder called include. The include folder will house our configuration file for database connection. Create a file called index.php in your project root directory. All the request that comes to the web server will go through this index file. In our include folder, create three files called config.php, db.php and quiz.php. When a client sends a request, the index.php file will analyze the request and talk to the database. It will retrieve all the quiz questions present in the quiz_questions table. The data will first be converted to an array and rather will be output as a Json object. 2 Likes 1 Share |
Re: Android Quiz Application With Json Parser, Php And Mysql Database by nollyj: 3:40pm On Apr 09, 2015 |
The android application will consume the Json object and we will use android Json parsing API to manipulate the content of the server response. Open the Php database config file called config.php and paste the following code on it. <?php define("DB_HOST", 'localhost' ); define("DB_USER", 'quiz' ); define("DB_PASSWORD", 'quiz' ); define("DB_NAME", 'quiz' ); ?> This is the database connection details. Please make sure you change this information in accordance with your database server. In the code above we are just defining the database connection properties. With this in place, we will establish a database connection with our Php application. This is done in the db.php file. Open the file and paste the following code below. <?php The config file was included in the beginning of db.php file. The getDB function returns an instance of our database connection. Now that we have our database connection, create a quiz.php file. The quiz class contains a function that will query the database to obtain all the quiz questions present in the database. The quiz class includes the db.php class. Copy and paste the following code in the file. <?php Now we will finish up with our index.php file. We will include the quiz.php file in the index.php. What it will basically do is to return all the quiz questions store in MYSQL database and output it as a Json object. Please note that this is a simple tutorial and there is no other measure taken to make sure that the request is not malicious. The code is below. You can copy it and paste in your own project. <?php A simple example of the Json object output from the server is shown below {"quiz_questions":[{"id":"1","question":"Who is the most popular musician in Nigeria","possible_answers":"Tufac, P Square, Dbanji, Tiwa Savage","correct_answer":"1"},{"id":"2","question":"Who is the winner of 2015 Presidential Election in Nigeria?","possible_answers":"Obasanjo, Goodluck, Buhari, Fashola","correct_answer":"3"}]} With the web application completed, we will move over to create our android application. In order to parse JSON object from a remote server source, we are going to need internet access for our application. |
Re: Android Quiz Application With Json Parser, Php And Mysql Database by nollyj: 4:21pm On Apr 09, 2015 |
It is important to note that when you are working with internet or accessing data from a remote source in android, you will need to add internet permission in your android manifest file. <uses-permission android:name="android.permission.INTERNET"/> We are going to use android API for HTTP request. Once we get the Json output as an InputStream, we will convert it to a string. The string object will be pass as a parameter to an instance of JsonObject class. We will also use an AsyncTask class to make server calls in a background Thread. This is important so that we will not end up blocking the main UI Thread. Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with. Windows 7 Android Studio Samsung Galaxy Fame Lite Min SDK 14 Target SDK 19 To create a new android application project, following the steps as stipulated below. Go to File menu Click on New menu Click on Android Application Enter Project name: AndroidQuizApplication Package: com.inducesmile.androidquizapplication Keep other default selections. Continue to click on next button until Finish button is active, then click on Finish Button Once you are done with creating your project, make sure you change the package name if you did not use the same package. Quiz Design The first step here is to have a clear view about what we are planning to achieve. In this android quiz application, there will be an intro activity page with a button when a user clicks on the button view it will take the user to the quiz activity page where the user will start taking the quiz. A diagram that illustrate the quiz application is shown below. 1 Like |
Re: Android Quiz Application With Json Parser, Php And Mysql Database by nollyj: 5:04pm On Apr 10, 2015 |
Main Layout We will start by adding background image to the root layout in our activity_main.xml layout file. The image I used can be found in the project source code below. You can use your own image be changing the above used image. Add a Button View to the layout as shown in the image above. If you are using Eclipse or Android Studio, you can switch to the design view and drag and drop this View inside your layout file. You can also copy and paste the following code below into this file if you don’t want to do it yourself. <RelativeLayout xmlns:android="link" xmlns:tools="link" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg" tools:context=".MainActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_marginRight="32dp" android:layout_marginEnd="32dp" android:background="@drawable/mbutton" android:layout_marginBottom="48dp" /> </RelativeLayout> The text content of our View components are stored in the strings.xml file. The updated contain of the file is shown below <resources> <string name="app_name">Android Quiz Application</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="title_activity_quiz">Quiz Questions</string> <string name="question">Question 1. How is the first president of Nigeria?</string> <string name="answer_one">Answer One</string> <string name="answer_two"> Answer Two</string> <string name="answer_three">Answer Three</string> <string name="answer_four"> Answer Four</string> <string name="next_questions"> Next Question</string> <string name="previous_questions"> Previous Question</string> </resources> We will make use of few colors in this application so we have to update our color.xml file to include all these colours. This is important because it lets us have a single place where we can change and set colours for our project. The code is shown below. <?xml version="1.0" encoding="utf-8"?> <resources> <color name="black">#000000</color> <color name="white">#ffffff</color> </resources> MainActivity.java In the MainActivity.java file, we will get the instance of our button View and attach and event listener to the button View. When the button is click, it will redirect to the QuizActivity page. The code for the MainActivity.java is shown below. import android.content.Intent; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button startButton = (Button)findViewById(R.id.button); startButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this, QuizActivity.class); startActivity(intent); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } |
Re: Android Quiz Application With Json Parser, Php And Mysql Database by nollyj2: 5:14pm On Apr 10, 2015 |
Main Layout We will start by adding background image to the root layout in our activity_main.xml layout file. The image I used can be found in the project source code below. You can use your own image be changing the above used image. Add a Button View to the layout as shown in the image above. If you are using Eclipse or Android Studio, you can switch to the design view and drag and drop this View inside your layout file. You can also copy and paste the following code below into this file if you don’t want to do it yourself. <RelativeLayout xmlns:android="link missing due to Nairaland bot" xmlns:tools="link missing due to Nairaland bot" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg" tools:context=".MainActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_marginRight="32dp" android:layout_marginEnd="32dp" android:background="@drawable/mbutton" android:layout_marginBottom="48dp" /> </RelativeLayout> The text content of our View components are stored in the strings.xml file. The updated contain of the file is shown below <resources> <string name="app_name">Android Quiz Application</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string name="title_activity_quiz">Quiz Questions</string> <string name="question">Question 1. How is the first president of Nigeria?</string> <string name="answer_one">Answer One</string> <string name="answer_two"> Answer Two</string> <string name="answer_three">Answer Three</string> <string name="answer_four"> Answer Four</string> <string name="next_questions"> Next Question</string> <string name="previous_questions"> Previous Question</string> </resources> We will make use of few colors in this application so we have to update our color.xml file to include all these colours. This is important because it lets us have a single place where we can change and set colours for our project. The code is shown below. <?xml version="1.0" encoding="utf-8"?> <resources> <color name="black">#000000</color> <color name="white">#ffffff</color> </resources> MainActivity.java In the MainActivity.java file, we will get the instance of our button View and attach and event listener to the button View. When the button is click, it will redirect to the QuizActivity page. The code for the MainActivity.java is shown below. import android.content.Intent; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button startButton = (Button)findViewById(R.id.button); startButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this, QuizActivity.class); startActivity(intent); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } |
Re: Android Quiz Application With Json Parser, Php And Mysql Database by nnamdiosu(m): 2:57pm On Apr 11, 2015 |
nollyj: wow. thanks . I'm so following this. more grease to ur elbow |
Re: Android Quiz Application With Json Parser, Php And Mysql Database by jamb20s: 8:10pm On Apr 14, 2015 |
nollyj2:What bout a screenshot of when the user finishes the quiz sir ? |
Re: Android Quiz Application With Json Parser, Php And Mysql Database by nollyj: 8:23pm On Apr 14, 2015 |
jamb20s: When I finish the application but right now I keep getting ban by bot whenever I post so I don't know when I will finish it. It is in the hands of Nairaland bot 1 Like |
(1) (Reply)
Python Tutorial / Dare Obasanjo (OBJ Junior): Microsoft IT Developer / Sorting List Of Numbers And Strings: Simple Puzzle
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 92 |