commit
This commit is contained in:
torun23
parent
1dab26397a
commit
f944a7637c
|
|
@ -7,5 +7,7 @@ $route['default_controller'] = 'home/index2';
|
|||
$route['404_override'] = '';
|
||||
$route['translate_uri_dashes'] = FALSE;
|
||||
$route['start'] = 'home/index';
|
||||
$route['new_form'] = 'home/create_form';
|
||||
$route['title_desc'] = 'home/title';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form extends CI_Controller {
|
||||
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
$this->load->model('Form_model');
|
||||
}
|
||||
|
||||
public function submit() {
|
||||
$form_data = json_decode($this->input->raw_input_stream, true);
|
||||
|
||||
if ($this->Form_model->save_form($form_data)) {
|
||||
$response = array('status' => 'success', 'message' => 'Form submitted successfully.');
|
||||
} else {
|
||||
$response = array('status' => 'error', 'message' => 'Error submitting form.');
|
||||
}
|
||||
|
||||
echo json_encode($response);
|
||||
}
|
||||
}
|
||||
|
|
@ -34,7 +34,13 @@ class Home extends CI_Controller
|
|||
$this->load->view('templates/footer');
|
||||
}
|
||||
|
||||
public function create_form(){
|
||||
public function design_form(){
|
||||
$this->load->view('templates/forms_ui');
|
||||
}
|
||||
public function title(){
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('templates/form_title');
|
||||
$this->load->view('templates/footer');
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
class New_form extends CI_Controller
|
||||
{
|
||||
public function create_form()
|
||||
{
|
||||
$data['title'] = 'Form Details';
|
||||
$this->form_validation->set_rules('title', 'Title', 'required');
|
||||
$this->form_validation->set_rules('description', 'Description', 'required');
|
||||
|
||||
|
||||
if ($this->form_validation->run() === FALSE) {
|
||||
$this->load->view('templates/header');
|
||||
$this->load->view('templates/form_title',$data);
|
||||
$this->load->view('templates/footer');
|
||||
} else {
|
||||
// $enc_password = md5($this->input->post('password'));
|
||||
$this->load->model('create_model');
|
||||
// $user_id = $this->session->userdata('user_id');
|
||||
|
||||
|
||||
$this->create_model->details();
|
||||
// $this->user_model->register();
|
||||
|
||||
|
||||
// $this->session->set_flashdata('user_registered', 'You are now registered and can log in');
|
||||
redirect('home/design_form');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -27,8 +27,14 @@ class Users extends CI_Controller
|
|||
}
|
||||
|
||||
}
|
||||
//login user
|
||||
|
||||
|
||||
/**
|
||||
* function to login into google forms
|
||||
* @param null
|
||||
* @return mixed(data return type)
|
||||
* @author torun
|
||||
*/
|
||||
public function login()
|
||||
{
|
||||
$data['title'] = 'Sign In';
|
||||
|
|
@ -48,22 +54,24 @@ class Users extends CI_Controller
|
|||
$password = md5($this->input->post('password'));
|
||||
$this->load->model('user_model');
|
||||
// Login user
|
||||
$user_id = $this->user_model->login($username, $password);
|
||||
$person_id = $this->user_model->login($username, $password);
|
||||
|
||||
if ($user_id) {
|
||||
if ($person_id) {
|
||||
// Create session
|
||||
$user_data = array(
|
||||
'user_id' => $user_id,
|
||||
'user_id' => $person_id,
|
||||
'username' => $username,
|
||||
'logged_in' => true
|
||||
);
|
||||
|
||||
$this->session->set_userdata($user_data);
|
||||
$person_id = $this->session->userdata('user_id');
|
||||
|
||||
|
||||
// Set message
|
||||
$this->session->set_flashdata('user_loggedin', 'You are now logged in');
|
||||
|
||||
redirect('start');
|
||||
redirect('title_desc');
|
||||
} else {
|
||||
// Set message
|
||||
$this->session->set_flashdata('login_failed', 'Login is invalid');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<?php
|
||||
defined('BASEPATH') or exit('No direct script access allowed');
|
||||
|
||||
class Your_controller extends CI_Controller
|
||||
{
|
||||
|
||||
public function getFormId()
|
||||
{
|
||||
// Check if user is logged in and get user_id from session
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
|
||||
// Query to fetch form_id from database based on user_id
|
||||
$form_id = $this->your_model->getFormIdByUserId($user_id); // Replace with your actual model method
|
||||
|
||||
// Return form_id as JSON response
|
||||
$this->output
|
||||
->set_content_type('application/json')
|
||||
->set_output(json_encode(array('form_id' => $form_id)));
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
<?php
|
||||
defined('BASEPATH') or exit('No direct script access allowed');
|
||||
|
||||
class Create_model extends CI_Model
|
||||
{
|
||||
public function details()
|
||||
{
|
||||
// Retrieve user_id from session
|
||||
$user_id = $this->session->userdata('user_id');
|
||||
|
||||
// Prepare data to insert into forms table
|
||||
$data = array(
|
||||
'user_id' => $user_id,
|
||||
'title' => $this->input->post('title'),
|
||||
'description' => $this->input->post('description')
|
||||
);
|
||||
|
||||
// Insert data into forms table
|
||||
$this->db->insert('forms', $data);
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form_model extends CI_Model {
|
||||
|
||||
public function save_form($form_data) {
|
||||
$this->db->trans_start();
|
||||
|
||||
foreach ($form_data as $section) {
|
||||
$question_data = array(
|
||||
'form_id' => $section['form_id'],
|
||||
'text' => $section['text'],
|
||||
'type' => $section['type'],
|
||||
'required' => $section['required'],
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
$this->db->insert('questions', $question_data);
|
||||
$question_id = $this->db->insert_id();
|
||||
|
||||
foreach ($section['options'] as $option_text) {
|
||||
$option_data = array(
|
||||
'question_id' => $question_id,
|
||||
'text' => $option_text,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
$this->db->insert('options', $option_data);
|
||||
}
|
||||
}
|
||||
|
||||
$this->db->trans_complete();
|
||||
|
||||
if ($this->db->trans_status() === FALSE) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Your_model extends CI_Model {
|
||||
public function getFormIdByUserId($user_id)
|
||||
{
|
||||
$this->db->select('form_id');
|
||||
$this->db->where('user_id', $user_id);
|
||||
$query = $this->db->get('forms'); // Replace 'your_forms_table' with your actual table name
|
||||
|
||||
if ($query->num_rows() > 0) {
|
||||
$row = $query->row();
|
||||
return $row->form_id;
|
||||
} else {
|
||||
return null; // Handle case when form_id is not found
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?php echo form_open('new_form/create_form'); ?>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<h1 class="text-center">
|
||||
<?php echo('Form Details'); ?>
|
||||
</h1>
|
||||
<div class="form-group">
|
||||
|
||||
<input type = "text" name ="title" class="form-control" placeholder = "Title" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type = "text" name ="description" class="form-control" placeholder = "Form Description" required autofocus>
|
||||
|
||||
</div>
|
||||
<button type = "submit" class = "btn btn-primary btn-block">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php echo form_close(); ?>
|
||||
|
|
@ -1,280 +1,46 @@
|
|||
To achieve the functionality where the form data is submitted and stored in the database using CodeIgniter, we need to set up the necessary controllers, models, and views. Below is a detailed guide on how to implement this.
|
||||
**********MODEL****************
|
||||
|
||||
### Step 1: Update JavaScript (scripts.js)
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
The JavaScript file will handle form interactions and prepare data for submission to the server.
|
||||
class Form_model extends CI_Model {
|
||||
|
||||
```javascript
|
||||
$(document).ready(function() {
|
||||
let index = 1;
|
||||
let activeSection = null;
|
||||
public function save_form($form_data) {
|
||||
$this->db->trans_start();
|
||||
|
||||
// Function to add an option based on type
|
||||
function addOption(type, container) {
|
||||
let optionIndex = container.children().length + 1;
|
||||
let optionHtml;
|
||||
if (type === 'multiple-choice' || type === 'checkboxes') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="${type === 'multiple-choice' ? 'radio' : 'checkbox'}" disabled>
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'dropdown') {
|
||||
optionHtml = `
|
||||
<div class="option">
|
||||
<input type="text" class="form-control option-label" value="Option ${optionIndex}">
|
||||
<span class="delete-option-icon">×</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
container.append(optionHtml);
|
||||
}
|
||||
foreach ($form_data as $section) {
|
||||
$question_data = array(
|
||||
'form_id' => $section['form_id'],
|
||||
'text' => $section['text'],
|
||||
'type' => $section['type'],
|
||||
'required' => $section['required'],
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
// Function to create a new form section
|
||||
function createFormSection() {
|
||||
let newSection = `
|
||||
<div class="form-section" data-index="${index}">
|
||||
<div class="header-row">
|
||||
${index === 1 ? '<div class="violet-border"></div>' : ''}
|
||||
<textarea class="form-control untitled-question" placeholder="Untitled Question" rows="1"></textarea>
|
||||
<select class="custom-select">
|
||||
<option value="short-answer">Short Answer</option>
|
||||
<option value="paragraph">Paragraph</option>
|
||||
<option value="multiple-choice">Multiple Choice</option>
|
||||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(newSection);
|
||||
index++;
|
||||
positionAddSectionButton();
|
||||
}
|
||||
$this->db->insert('questions', $question_data);
|
||||
$question_id = $this->db->insert_id();
|
||||
|
||||
// Position the "Add Section" button dynamically
|
||||
function positionAddSectionButton() {
|
||||
if (activeSection) {
|
||||
let position = activeSection.position();
|
||||
let buttonWidth = $('#add-section-btn').outerWidth();
|
||||
let buttonHeight = $('#add-section-btn').outerHeight();
|
||||
foreach ($section['options'] as $option_text) {
|
||||
$option_data = array(
|
||||
'question_id' => $question_id,
|
||||
'text' => $option_text,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
$('#add-section-btn').css({
|
||||
position: 'absolute',
|
||||
left: position.left - buttonWidth - 47 + 'px',
|
||||
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
|
||||
});
|
||||
$this->db->insert('options', $option_data);
|
||||
}
|
||||
}
|
||||
|
||||
// Event listener for "Add Section" button
|
||||
$('#add-section-btn').on('click', function() {
|
||||
createFormSection();
|
||||
$('.form-section').removeClass('active');
|
||||
activeSection = $('.form-section').last();
|
||||
activeSection.addClass('active');
|
||||
positionAddSectionButton();
|
||||
});
|
||||
$this->db->trans_complete();
|
||||
|
||||
// Event listener for changing question type
|
||||
$(document).on('change', '.custom-select', function() {
|
||||
let type = $(this).val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
container.empty();
|
||||
|
||||
$(this).closest('.form-section').find('.add-option-btn').remove();
|
||||
|
||||
if (type === 'short-answer') {
|
||||
container.append('<input type="text" class="form-control" disabled placeholder="Short answer text">');
|
||||
} else if (type === 'paragraph') {
|
||||
container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
|
||||
if ($this->db->trans_status() === FALSE) {
|
||||
return false;
|
||||
} else {
|
||||
addOption(type, container);
|
||||
$(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
// Event listener for adding an option
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
let type = $(this).closest('.form-section').find('.custom-select').val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
addOption(type, container);
|
||||
});
|
||||
|
||||
// Event listener for deleting a section
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
let section = $(this).closest('.form-section');
|
||||
let prevSection = section.prev('.form-section');
|
||||
let nextSection = section.next('.form-section');
|
||||
section.remove();
|
||||
if (section.hasClass('active')) {
|
||||
activeSection = null;
|
||||
}
|
||||
if (prevSection.length > 0) {
|
||||
prevSection.find('.delete-section-icon').appendTo(prevSection.find('.form-section'));
|
||||
activeSection = prevSection;
|
||||
} else if (nextSection.length > 0) {
|
||||
nextSection.find('.delete-section-icon').appendTo(nextSection.find('.form-header'));
|
||||
activeSection = nextSection;
|
||||
}
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Event listener for deleting an option
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
$(this).closest('.option').remove();
|
||||
});
|
||||
|
||||
// Event listener for required toggle button
|
||||
$(document).on('click', '.required-toggle', function() {
|
||||
$(this).closest('.form-section').toggleClass('required');
|
||||
});
|
||||
|
||||
// Event listener for preview button
|
||||
$('#preview-btn').on('click', function() {
|
||||
let previewWindow = window.open('', '_blank');
|
||||
let previewContent = `
|
||||
<html>
|
||||
<head>
|
||||
<title>Form Preview</title>
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background-color: rgb(240, 235, 248); }
|
||||
.container { margin-top: 30px; }
|
||||
.form-section {background-color: white;width: 56%;margin-bottom: 30px;margin-left: 240px;padding: 20px;position: relative;align-items: center;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
||||
.form-header {background-color: white;padding: 20px;margin-bottom: 10px;margin-left: 240px;border-radius: 10px 10px 0 0;display: flex;justify-content: space-between;align-items: center; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-top: 10px solid rgb(103, 58, 183);width: 56%; }
|
||||
.form-section h2 { text-align: center; margin-bottom: 30px; }
|
||||
.form-section .question-section { margin-bottom: 20px; } /* Add margin-bottom to the question section */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h2>Untitled Form</h2>
|
||||
</div>
|
||||
`;
|
||||
$('.form-section').each(function() {
|
||||
previewContent += '<div class="form-section">';
|
||||
previewContent += '<div class="question-section">';
|
||||
previewContent += '<textarea class="form-control question-label" disabled>' + $(this).find('.untitled-question').val() + '</textarea>';
|
||||
previewContent += '</div>';
|
||||
let type = $(this).find('.custom-select').val();
|
||||
let optionsContainer = $(this).find('.options-container');
|
||||
|
||||
if (type === 'multiple-choice') {
|
||||
optionsContainer.find('.option').each(function() {
|
||||
previewContent += `
|
||||
<div class="option">
|
||||
<input type="radio" name="option-${index}">
|
||||
<label>${$(this).find('.option-label').val()}</label>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else if (type === 'checkboxes') {
|
||||
optionsContainer.find('.option').each(function() {
|
||||
previewContent += `
|
||||
<div class="option">
|
||||
<input type="checkbox">
|
||||
<label>${$(this).find('.option-label').val()}</label>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
} else if (type === 'short-answer') {
|
||||
previewContent += '<input type="text" class="form-control" placeholder="Short answer text">';
|
||||
} else if (type === 'paragraph') {
|
||||
previewContent += '<textarea class="form-control" placeholder="Paragraph text"></textarea>';
|
||||
} else if (type === 'dropdown') {
|
||||
let dropdownHtml = '<select class="form-control">';
|
||||
optionsContainer.find('.option .option-label').each(function() {
|
||||
dropdownHtml += `<option>${$(this).val()}</option>`;
|
||||
});
|
||||
dropdownHtml += '</select>';
|
||||
previewContent += dropdownHtml;
|
||||
}
|
||||
previewContent += '</div>';
|
||||
});
|
||||
previewContent += `
|
||||
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
previewWindow.document.write(previewContent);
|
||||
previewWindow.document.close();
|
||||
});
|
||||
|
||||
// Event listener for clicking on a form section
|
||||
|
||||
|
||||
$(document).on('click', '.form-section', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
activeSection = $(this);
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Submit button click event to save data to the database
|
||||
$(document).on('click', '#submit-btn', function() {
|
||||
let formData = [];
|
||||
|
||||
// Iterate through each form section
|
||||
$('.form-section').each(function() {
|
||||
let sectionData = {
|
||||
question: $(this).find('.untitled-question').val(),
|
||||
type: $(this).find('.custom-select').val(),
|
||||
required: $(this).find('.required-toggle').prop('checked') ? 1 : 0,
|
||||
options: []
|
||||
};
|
||||
|
||||
// Iterate through options if any
|
||||
$(this).find('.option').each(function() {
|
||||
sectionData.options.push($(this).find('.option-label').val());
|
||||
});
|
||||
|
||||
formData.push(sectionData);
|
||||
});
|
||||
|
||||
// Ajax call to submit data
|
||||
$.ajax({
|
||||
url: "<?php echo base_url('form/submit_form_data'); ?>",
|
||||
type: "POST",
|
||||
data: {
|
||||
formData: formData
|
||||
},
|
||||
success: function(response) {
|
||||
alert(response); // Handle response from server
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize sortable feature for form sections
|
||||
$('#form-container').sortable({
|
||||
placeholder: 'ui-state-highlight',
|
||||
start: function (event, ui) {
|
||||
ui.placeholder.height(ui.item.height());
|
||||
},
|
||||
stop: function (event, ui) {
|
||||
positionAddSectionButton();
|
||||
}
|
||||
});
|
||||
|
||||
$('#form-container').disableSelection();
|
||||
});
|
||||
```
|
||||
|
||||
### Step 2: Create Controllers and Models in CodeIgniter
|
||||
|
||||
#### 1. Controller: Form.php
|
||||
|
||||
```php
|
||||
}
|
||||
********************Controller**********************
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
|
|
@ -285,88 +51,24 @@ class Form extends CI_Controller {
|
|||
$this->load->model('Form_model');
|
||||
}
|
||||
|
||||
public function index() {
|
||||
// Load view for form creation
|
||||
$this->load->view('create_form');
|
||||
public function submit() {
|
||||
$form_data = json_decode($this->input->raw_input_stream, true);
|
||||
|
||||
if ($this->Form_model->save_form($form_data)) {
|
||||
$response = array('status' => 'success', 'message' => 'Form submitted successfully.');
|
||||
} else {
|
||||
$response = array('status' => 'error', 'message' => 'Error submitting form.');
|
||||
}
|
||||
|
||||
public function submit_form_data() {
|
||||
$formData = $this->input->post('formData');
|
||||
|
||||
// Example to get user ID (you should have this implemented in your authentication flow)
|
||||
$userId = 1; // Replace with your actual user ID retrieval logic
|
||||
|
||||
// Insert form data into database using model
|
||||
foreach ($formData as $section) {
|
||||
$formId = $this->Form_model->insert_form($userId, $section['question']);
|
||||
|
||||
// Insert questions into database
|
||||
$this->Form_model->insert_question($formId, $section['type'], $section['required']);
|
||||
|
||||
// Insert options into database if any
|
||||
if (!empty($section['options'])) {
|
||||
foreach ($section['options'] as $option) {
|
||||
$this->Form_model->insert_option($formId, $option);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
echo "Form data submitted successfully!";
|
||||
echo json_encode($response);
|
||||
}
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
#### 2. Model: Form_model.php
|
||||
|
||||
```php
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form_model extends CI_Model {
|
||||
|
||||
public function insert_form($userId, $description) {
|
||||
// Insert form data and return form ID
|
||||
$data = array(
|
||||
'user_id' => $userId,
|
||||
'description' => $description,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
$this->db->insert('forms', $data);
|
||||
return $this->db->insert_id();
|
||||
}
|
||||
|
||||
public function insert_question($formId, $type, $required) {
|
||||
// Insert question data
|
||||
$data = array(
|
||||
'form_id' => $formId,
|
||||
'type' => $type,
|
||||
'required' => $required,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
$this->db->insert('questions', $data);
|
||||
}
|
||||
|
||||
public function insert_option($formId, $text) {
|
||||
// Insert option data
|
||||
$data = array(
|
||||
'question_id' => $formId, // Assuming form ID here, adjust as per your structure
|
||||
'text' => $text
|
||||
);
|
||||
$this->db->insert('options', $data);
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
```
|
||||
|
||||
### Step 3: Create Views
|
||||
|
||||
#### 1. create_form.php (View for form creation)
|
||||
|
||||
***********UPDATED HTML*************************
|
||||
### Updated HTML
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -387,7 +89,7 @@ class Form_model extends CI_Model {
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-nav > li > a {
|
||||
.navbar-custom .navbar-nav>li>a {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -399,8 +101,8 @@ class Form_model extends CI_Model {
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="navbar navbar-inverse navbar-custom">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
|
|
@ -416,7 +118,6 @@ class Form_model extends CI_Model {
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Form Creation Section -->
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<button id="preview-btn" class="btn btn-info"><i class="fas fa-eye"></i></button>
|
||||
|
|
@ -424,35 +125,196 @@ class Form_model extends CI_Model {
|
|||
<button id="add-section-btn" class="btn btn-primary">+</button>
|
||||
</div>
|
||||
<div id="form-container"></div>
|
||||
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
|
||||
<input type="hidden" id="form-id" value="YOUR_FORM_ID"> <!-- Ensure to set the form ID dynamically -->
|
||||
<button id="submit-btn" class="btn btn-success">Submit</button>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript files -->
|
||||
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#add-section-btn').on('click', function() {
|
||||
let newSection = `
|
||||
<div class="form-section">
|
||||
<input type="text" class="untitled-question" placeholder="Untitled Question">
|
||||
<select class="custom-select">
|
||||
<option value="text">Text</option>
|
||||
<option value="multiple_choice">Multiple Choice</option>
|
||||
</select>
|
||||
<input type="checkbox" class="required-toggle"> Required
|
||||
<div class="options-container">
|
||||
<button class="add-option-btn btn btn-secondary">Add Option</button>
|
||||
</div>
|
||||
</div>`;
|
||||
$('#form-container').append(newSection);
|
||||
});
|
||||
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
let optionInput = '<input type="text" class="option-label" placeholder="Option">';
|
||||
$(this).before(optionInput);
|
||||
});
|
||||
|
||||
$('#submit-btn').on('click', function() {
|
||||
let formData = collectFormData();
|
||||
|
||||
$.ajax({
|
||||
url: '<?php echo base_url(); ?>form/submit',
|
||||
type: 'POST',
|
||||
data: JSON.stringify(formData),
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
alert('Form submitted successfully!');
|
||||
console.log(response);
|
||||
},
|
||||
error: function(error) {
|
||||
alert('Error submitting form!');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function collectFormData() {
|
||||
let formData = [];
|
||||
let formId = $('#form-id').val();
|
||||
|
||||
$('.form-section').each(function() {
|
||||
let questionText = $(this).find('.untitled-question').val();
|
||||
let type = $(this).find('.custom-select').val();
|
||||
let required = $(this).find('.required-toggle').is(':checked');
|
||||
let options = [];
|
||||
|
||||
$(this).find('.option-label').each(function() {
|
||||
options.push($(this).val());
|
||||
});
|
||||
|
||||
formData.push({
|
||||
form_id: formId,
|
||||
text: questionText,
|
||||
type: type,
|
||||
required: required,
|
||||
options: options
|
||||
});
|
||||
});
|
||||
|
||||
return formData;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
### Step 4: Database Structure
|
||||
|
||||
Ensure your database tables (`users`, `forms`, `questions`, `options`) are set up according to your described structure:
|
||||
|
||||
- `users` table: id (primary key), username, email, password, created_at
|
||||
- `forms` table: id (primary key), user_id (foreign key to users.id), description, created_at
|
||||
- `questions` table: id (primary key), form_id (foreign key to forms.id), text, type, required, created_at
|
||||
- `options` table: id (primary key), question_id (foreign key to questions.id), text
|
||||
*************************************88*************************
|
||||
new Controller
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
### Step 5: Configure CodeIgniter
|
||||
class Questions extends CI_Controller {
|
||||
|
||||
Ensure your CodeIgniter configuration (`config/config.php` and `config/database.php`) is set up correctly with base URL, database connection settings, and any other necessary configurations.
|
||||
public function __construct() {
|
||||
parent::__construct();
|
||||
// Load necessary models and libraries here
|
||||
$this->load->model('Form_model'); // Load your Form_model
|
||||
}
|
||||
|
||||
### Step 6: Testing
|
||||
public function save() {
|
||||
// Handle AJAX post data
|
||||
$form_data = $this->input->post('form_data'); // Assuming your AJAX post sends 'form_data'
|
||||
|
||||
- Access the form creation page (`http://yourdomain.com/form`) and create a form.
|
||||
- Click on the "Submit" button to save the form data.
|
||||
- Verify that the data is correctly saved in your database tables.
|
||||
if (!empty($form_data)) {
|
||||
foreach ($form_data as $section) {
|
||||
$question_data = array(
|
||||
'form_id' => $section['form_id'],
|
||||
'text' => $section['text'],
|
||||
'type' => $section['type'],
|
||||
'required' => $section['required'],
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
This setup assumes you have basic knowledge of CodeIgniter and have configured your environment correctly. Adjust paths (`base_url()`) and database configurations as per your setup.
|
||||
$question_id = $this->Form_model->save_question($question_data);
|
||||
|
||||
// Save options for this question
|
||||
foreach ($section['options'] as $option_text) {
|
||||
$option_data = array(
|
||||
'question_id' => $question_id,
|
||||
'text' => $option_text,
|
||||
'created_at' => date('Y-m-d H:i:s')
|
||||
);
|
||||
|
||||
$this->Form_model->save_option($option_data);
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode(array('success' => true));
|
||||
} else {
|
||||
echo json_encode(array('success' => false));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
******************************newMODEL**********
|
||||
<?php
|
||||
defined('BASEPATH') OR exit('No direct script access allowed');
|
||||
|
||||
class Form_model extends CI_Model {
|
||||
|
||||
public function save_question($question_data) {
|
||||
$this->db->insert('questions', $question_data);
|
||||
return $this->db->insert_id();
|
||||
}
|
||||
|
||||
public function save_option($option_data) {
|
||||
$this->db->insert('options', $option_data);
|
||||
}
|
||||
|
||||
}
|
||||
******************JAVASCRIPT************updatead
|
||||
function collectFormData() {
|
||||
let formData = [];
|
||||
let formId = $('#form-id').val();
|
||||
|
||||
$('.form-section').each(function() {
|
||||
let questionText = $(this).find('.untitled-question').val();
|
||||
let type = $(this).find('.custom-select').val();
|
||||
let required = $(this).find('.required-toggle').is(':checked');
|
||||
let options = [];
|
||||
|
||||
$(this).find('.option-label').each(function() {
|
||||
options.push($(this).val());
|
||||
});
|
||||
|
||||
formData.push({
|
||||
form_id: formId,
|
||||
text: questionText,
|
||||
type: type,
|
||||
required: required,
|
||||
options: options
|
||||
});
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: 'Questions/save', // Endpoint to handle saving questions
|
||||
type: 'POST',
|
||||
dataType: 'json',
|
||||
data: { form_data: formData },
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
alert('Form data saved successfully!');
|
||||
// Handle success actions
|
||||
} else {
|
||||
alert('Failed to save form data.');
|
||||
// Handle failure actions
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
alert('Error: ' + error);
|
||||
// Handle error actions
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,19 +18,18 @@
|
|||
|
||||
.navbar-custom .navbar-brand {
|
||||
color: white;
|
||||
font-size: 18px; /* Adjust font size for navbar links */
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.navbar-custom .navbar-nav > li > a {
|
||||
.navbar-custom .navbar-nav>li>a {
|
||||
color: white;
|
||||
font-size: 16px; /* Adjust font size for navbar links */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Additional styling for submit button */
|
||||
#submit-btn {
|
||||
margin-top: 20px;
|
||||
float: left; /* Align button to the left */
|
||||
clear: both; /* Clear float to ensure proper layout */
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -59,14 +58,15 @@
|
|||
</div>
|
||||
<div id="form-container"></div>
|
||||
|
||||
<!-- Submit button -->
|
||||
<button class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
<button id="submit-btn" class="btn btn-success" style="margin-left: 240px; margin-top: 20px">Submit</button>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="<?php echo base_url('assets/js/jquery.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/bootstrap.min.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/jquery-ui.js'); ?>"></script>
|
||||
<script src="<?php echo base_url('assets/js/scripts.js'); ?>"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<li><a href="<?php echo base_url(); ?>users/register">Register</a></li>
|
||||
<?php endif; ?>
|
||||
<?php if ($this->session->userdata('logged_in')): ?>
|
||||
<li><a href="<?php echo base_url(); ?>home/create_form">Create Form</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>home/design_form">Create Form</a></li>
|
||||
<li><a href="<?php echo base_url(); ?>users/logout">Logout</a></li>
|
||||
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,20 @@ body {
|
|||
position: relative;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form_container_top{
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #f4f4f9;
|
||||
color: black;
|
||||
height: 20px;
|
||||
}
|
||||
/* Form header styles */
|
||||
.form-header {
|
||||
background-color: white;
|
||||
|
|
|
|||
|
|
@ -210,6 +210,7 @@ K });
|
|||
previewWindow.document.close();
|
||||
});
|
||||
|
||||
|
||||
// Activate the section;repositions add section button
|
||||
$(document).on('click', '.form-section', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
|
|
@ -228,5 +229,52 @@ K });
|
|||
}
|
||||
});
|
||||
|
||||
$('#submit-btn').on('click', function() {
|
||||
let formData = collectFormData();
|
||||
|
||||
$.ajax({
|
||||
url: '<?php echo base_url(); ?>form/submit',
|
||||
type: 'POST',
|
||||
data: JSON.stringify(formData),
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
alert('Form submitted successfully!');
|
||||
console.log(response);
|
||||
},
|
||||
error: function(error) {
|
||||
alert('Error submitting form!');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function collectFormData() {
|
||||
let formData = [];
|
||||
|
||||
// let formId = $('#form-id').val();
|
||||
|
||||
$('.form-section').each(function() {
|
||||
let questionText = $(this).find('.untitled-question').val();
|
||||
let type = $(this).find('.custom-select').val();
|
||||
let required = $(this).find('.required-toggle').is(':checked');
|
||||
let options = [];
|
||||
|
||||
$(this).find('.option-label').each(function() {
|
||||
options.push($(this).val());
|
||||
});
|
||||
|
||||
formData.push({
|
||||
// form_id: formId,
|
||||
text: questionText,
|
||||
type: type,
|
||||
required: required,
|
||||
options: options
|
||||
});
|
||||
});
|
||||
|
||||
return formData;
|
||||
}
|
||||
|
||||
$('#form-container').disableSelection();
|
||||
});
|
||||
Loading…
Reference in New Issue